/* ===================================================================== apple.css — PROTOTYPE page d'accueil, style inspiré de uimagic.co --------------------------------------------------------------------- Chargé UNIQUEMENT sur index.html, APRÈS style.css, tout scopé sous html.apple → aucune autre page n'est affectée. Direction : fond SOMBRE chaud (#18171c façon uimagic), titre en Outfit medium très grand, sous-titre léger, halos bleus discrets, boutons pilule. Accent = bleu Up$hift (#0a84ff) conservé. Pour désactiver : retirer class="apple" sur + le . ===================================================================== */ html.apple { --a-bg: #18171c; /* charbon chaud (uimagic) */ --a-bg-2: #161519; /* bas du dégradé hero */ --a-bg-alt: #1c1b21; /* footer / bandeaux */ --a-text: #f3f3f5; /* texte courant */ --a-text-2: #b1b0b5; /* sous-titres (uimagic) */ --a-text-3: #86858b; /* labels discrets */ --a-line: rgba(255,255,255,0.10); --a-line-2: rgba(255,255,255,0.18); --a-hover: rgba(255,255,255,0.08); --a-accent: #0a84ff; /* bleu Up$hift */ --a-accent-2:#3a9bff; /* bleu plus clair (lisible sur fond sombre) */ /* Re-teinte TOUS les composants existants (cartes, sections, footer, auth…) à la palette uimagic chaude, sans réécrire chaque règle : on surcharge les variables de base de style.css. */ --bg-dark: #18171c; --bg-section: #201f26; --bg-card: #24232a; --bg-card-hover: #2c2b33; --border: rgba(255,255,255,0.08); --border-hover: rgba(255,255,255,0.16); } /* ---------- Base ---------- */ html.apple, html.apple body { background: var(--a-bg); color: var(--a-text); } html.apple body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Écran de chargement d'arrivée + spinner (sombre, cohérent avec le fond). */ html.apple:not(.upshift-ready)::before { background: var(--a-bg); } html.apple:not(.upshift-ready)::after { border-color: rgba(255,255,255,0.14); border-top-color: var(--a-accent); } html.apple .spinner { border-color: rgba(255,255,255,0.14); border-top-color: var(--a-accent); } html.apple .nav-loader { background: rgba(24,23,28,0.6); } /* ---------- Navbar (sombre translucide) ---------- */ html.apple .navbar { background: rgba(24,23,28,0.72); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-bottom: none; } html.apple .nav-container { height: 56px; } /* Menu central : pilule "liquid glass" (vrais boutons de navigation). */ html.apple .nav-links { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-radius: 100px; padding: 5px; gap: 4px; } html.apple .nav-links > li > a { color: rgba(255,255,255,0.82); font-weight: 400; font-size: 0.85rem; } html.apple .nav-links > li > a:hover { background: var(--a-hover); color: #fff; } html.apple .dropdown-menu { background: rgba(30,29,35,0.92); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border: 1px solid var(--a-line); box-shadow: 0 14px 40px rgba(0,0,0,0.5); } html.apple .dropdown-menu li a { color: var(--a-text-2); } html.apple .dropdown-menu li a:hover { color: #fff; background: var(--a-hover); } /* Boutons gauche (Communauté / L'Actu) : pilules sombres discrètes. */ html.apple .btn-community, html.apple .btn-actu { background: rgba(255,255,255,0.06); border: 1px solid var(--a-line); color: #fff; font-weight: 500; } html.apple .btn-community:hover, html.apple .btn-actu:hover { background: rgba(255,255,255,0.11); border-color: var(--a-line-2); color: #fff; transform: none; } html.apple .btn-community svg { color: var(--a-accent-2); } html.apple .btn-actu svg { color: var(--a-accent-2); } html.apple .btn-community .comm-dot { background: var(--a-accent); box-shadow: none; } html.apple .btn-actu .actu-dot { background: #ff4d4f; box-shadow: none; } /* CTA droite : pilule BLANCHE (signature uimagic) + lien secondaire discret. */ html.apple .btn-nav { background: #fff; color: #18171c; font-weight: 600; border-radius: 100px; } html.apple .btn-nav:hover { background: #eaeaea; transform: none; } html.apple .btn-nav-ghost { background: transparent; color: #fff; border: 1px solid var(--a-line-2); -webkit-backdrop-filter: none; backdrop-filter: none; } html.apple .btn-nav-ghost:hover { background: var(--a-hover); color: #fff; } html.apple .btn-nav.btn-signout { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--a-line); } html.apple .btn-nav.btn-signout:hover { background: rgba(255,255,255,0.11); border-color: var(--a-line-2); color: #fff; } html.apple .mobile-toggle span { background: #fff; } /* ---------- Hero (fond sombre + halo bleu discret ; la phrase domine) ---------- */ html.apple .hero { min-height: 100vh; justify-content: flex-start; padding-top: clamp(120px, 15vh, 200px); padding-bottom: 88px; background: radial-gradient(72% 56% at 50% 30%, rgba(10,132,255,0.13) 0%, rgba(10,132,255,0) 62%), linear-gradient(180deg, var(--a-bg) 0%, var(--a-bg-2) 100%); } html.apple .hero-overlay { display: none; } html.apple .hero-content { padding-top: 0; padding-bottom: 0; } html.apple .hero-tag { color: var(--a-text-2); letter-spacing: 4px; font-weight: 500; margin-bottom: 34px; } html.apple .hero-tag .tag-line { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); } /* Titre : Outfit, poids medium (500) façon uimagic, très grand. */ html.apple .hero h1 { font-family: 'Outfit', 'Inter', -apple-system, sans-serif; font-weight: 500; /* min 2.2rem pour que "avec une vision" tienne jusqu'a 320px ; cap 6.6rem inchange sur desktop (rendu valide identique a 1280/1440). */ font-size: clamp(2.2rem, 9vw, 6.6rem); line-height: 1.0; letter-spacing: -0.02em; color: #fff; max-width: 100%; margin-bottom: 30px; } /* « vision » = le mot qui ressort : bleu Up$hift + halo lumineux. */ html.apple .hero h1 em { font-style: normal; color: var(--a-accent-2); -webkit-text-fill-color: var(--a-accent-2); text-shadow: 0 0 42px rgba(10,132,255,0.55); } html.apple .hero-sub { color: var(--a-text-2); font-weight: 300; font-size: 1.24rem; line-height: 1.5; max-width: 620px; } /* Accueil uniquement : sous-titre plus discret sous le grand titre. */ html.apple .hero .hero-sub { font-size: 1.05rem; } /* Stats repoussées en bas ; chiffres blancs, labels discrets. */ html.apple .hero-stats { margin-top: auto; padding-top: 64px; } html.apple .hero-stat-value { font-family: 'Outfit', 'Inter', sans-serif; color: #fff; font-weight: 500; font-size: 2rem; letter-spacing: -0.01em; text-shadow: none; } html.apple .hero-stat-value::after { display: none; } html.apple .hero-stat-label { color: var(--a-text-3); } /* ---------- Ticker : bandeau transparent, texte clair ---------- */ html.apple .hero-ticker { background: transparent; border-top: 1px solid var(--a-line); padding-top: 0; } html.apple .ticker-item { color: var(--a-text); font-weight: 500; } html.apple .ticker-item.up i { color: #34c759; } html.apple .ticker-item.down i { color: #ff453a; } /* ---------- Footer (sombre) ---------- */ html.apple .footer { background: var(--a-bg-alt); border-top: 1px solid var(--a-line); } html.apple .logo { color: #fff; } html.apple .logo .accent { color: var(--a-accent-2); } html.apple .footer-brand p, html.apple .footer p, html.apple .footer ul a { color: var(--a-text-2); } html.apple .footer h4 { color: var(--a-text-3); } html.apple .footer ul a:hover { color: #fff; } html.apple .footer-social a { background: rgba(255,255,255,0.04); border: 1px solid var(--a-line); color: var(--a-text-2); } html.apple .footer-social a:hover { color: #fff; border-color: var(--a-line-2); background: rgba(255,255,255,0.08); } html.apple .newsletter-form { background: rgba(255,255,255,0.04); border: 1px solid var(--a-line-2); } html.apple .newsletter-form:focus-within { border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(10,132,255,0.18); } html.apple .newsletter-form input { color: #fff; } html.apple .newsletter-form input::placeholder { color: var(--a-text-3); } html.apple .newsletter-form button { background: var(--a-accent); color: #fff; } html.apple .newsletter-form button:hover { background: #409cff; } html.apple .footer-bottom { border-top: 1px solid var(--a-line); } html.apple .footer-bottom p, html.apple .footer-credit, html.apple .footer-disclaimer, html.apple .footer-legal-link a { color: var(--a-text-3); } html.apple .footer-legal-link a:hover { color: #fff; } /* ---------- Boutons primaires génériques (pilule blanche) ---------- */ html.apple .btn-primary { background: #fff; color: #18171c; } html.apple .btn-primary:hover { background: #eaeaea; box-shadow: 0 6px 22px rgba(0,0,0,0.4); } /* ===================================================================== PAGES INTÉRIEURES (catégories, article, actu, à propos, contact, auth, communauté, légal…). Le reste des composants est déjà re-teinté via les variables de base ci-dessus ; on ajoute ici les touches uimagic. ===================================================================== */ /* Titres en Outfit (comme la home). */ html.apple h1, html.apple h2, html.apple h3, html.apple .page-hero h1, html.apple .section-header h2, html.apple .auth-card h2, html.apple .actu-post-title, html.apple .card-body h3 { font-family: 'Outfit', 'Inter', -apple-system, sans-serif; } html.apple .page-hero h1 { font-weight: 500; letter-spacing: -0.02em; color: #fff; } html.apple .section-header h2 { font-weight: 600; } /* Hero des pages intérieures : on retire la PHOTO (posée en inline → !important) et on met le même fond sombre + halo bleu que l'accueil. */ html.apple .page-hero { background: radial-gradient(72% 60% at 50% 20%, rgba(10,132,255,0.14) 0%, rgba(10,132,255,0) 60%), var(--bg-dark) !important; } html.apple .page-hero-overlay { display: none; } html.apple .page-hero .hero-tag { color: var(--a-text-2); } /* Cartes / tuiles : ombre douce cohérente sur le fond sombre. */ html.apple .card:hover, html.apple .tile:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.5); } /* Correctif MOBILE : sous ~500px, les 3 stats de l'accueil ne tiennent pas cote a cote (libelles longs) -> debordement horizontal. On compacte pour qu'elles rentrent jusqu'a 320px. */ @media (max-width: 500px) { html.apple .hero-content { padding-left: 16px; padding-right: 16px; } html.apple .hero-stats { gap: 12px; } html.apple .hero-stat-value { font-size: 1.4rem; } html.apple .hero-stat-label { font-size: 0.44rem; letter-spacing: 0.8px; } /* La ligne "SMART FINANCE, UPWARDS" (non cassable + gros interlettrage + traits) forcait la largeur -> on la compacte et on masque les traits. */ html.apple .hero-tag { letter-spacing: 2px; font-size: 0.58rem; } html.apple .hero-tag .tag-line { display: none; } } /* ===================================================================== EFFET LIQUID GLASS sur les surfaces cartes / boutons (tout le site) : tuiles d'actifs, cartes d'articles, cartes de choix (Swift / Nos analyses + pages auth), boutons "Retour". Meme recette que la navbar : fond blanc tres translucide + flou d'arriere-plan. On ne touche PAS aux bordures (pour garder le liseré bleu "NOUVEAU" des .tile-is-new / .card-is-new). */ html.apple .tile, html.apple .card, html.apple .auth-card { background: rgba(255,255,255,0.055); } /* PERF : le flou n'est garde que sur les cartes de choix (peu nombreuses, posees au-dessus du halo du hero). Sur les tuiles et cartes d'articles (potentiellement 30-50 elements sur fond PLEIN), le backdrop-filter n'apporte AUCUN rendu visible mais coute cher au scroll -> fond translucide seul (rendu strictement identique). */ html.apple .auth-card { -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); } html.apple .tile:hover, html.apple .card:hover, html.apple .auth-card:hover { background: rgba(255,255,255,0.11); } /* Boutons "Retour" (categories / legal) : meme verre translucide. */ html.apple .feed-back, html.apple .legal-back { background: rgba(255,255,255,0.055); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); } html.apple .feed-back:hover, html.apple .legal-back:hover { background: rgba(255,255,255,0.11); color: #fff; } /* ===================================================================== FLUX Swift / Nos analyses : 3 cartes par ligne (au lieu de auto-fit qui n'en mettait que 2). Ordre inchange : le JS ajoute les cartes de la plus recente a la plus ancienne -> flux normal de la grille = recente en haut a gauche, ancienne en bas a droite. Repli 2 puis 1 colonne sur petit ecran. ===================================================================== */ html.apple .feed.active { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; } @media (max-width: 920px) { html.apple .feed.active { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { html.apple .feed.active { grid-template-columns: 1fr; } } /* Source en bas d'un post Swift (article.html) : petite ligne discrete avec divider, lien en bleu accent. Affichee seulement si la source est renseignee. */ html.apple .feed-post-source { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--a-line); font-size: 0.82rem; color: var(--a-text-3); letter-spacing: 0.2px; text-align: center; } html.apple .feed-post-source a { color: var(--a-accent-2); text-decoration: none; font-weight: 500; } html.apple .feed-post-source a:hover { text-decoration: underline; }