/* ============================================================ ASTERA CODE — Feuille de style partagée Derivee de app_colors.dart / app_theme.dart / app_dimensions.dart Police : Poppins (Google Fonts, lien web — pas de .ttf embarque) ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* ---- Surfaces & textes — MODE SOMBRE (defaut) ------------- */ --dark-scaffold: #0a0a0f; --dark-card: #161829; --dark-card-elevated: #1e2138; --dark-border: #252840; --dark-border-strong: #2e3155; --dark-text-primary: #ffffff; --dark-text-secondary: #b0b3cc; --dark-text-hint: #6b6f8e; --dark-text-disabled: #3d4060; /* ---- Surfaces & textes — MODE CLAIR ------------------------ */ --light-scaffold: #f0f2fa; --light-card: #eceef8; --light-card-elevated: #e4e6f4; --light-surface: #f7f8fd; --light-border: #d8dbf0; --light-border-strong: #c4c8e8; --light-text-primary: #0d0f1a; --light-text-secondary: #4a4d6a; --light-text-hint: #9b9eba; --light-text-disabled: #bfc2dc; /* ---- Couleurs semantiques (identiques dans les 2 modes) ---- */ --success: #4caf82; --error: #ff5c7c; --warning: #ffb547; --info: #58b4ff; /* ---- Theme 0 — Cosmos (defaut) ----------------------------- */ --t0-primary: #5ba4ff; --t0-secondary: #ab7ff4; --t0-accent: #7c6fff; /* ---- Theme 1 — Nature --------------------------------------- */ --t1-primary: #3dd68c; --t1-secondary: #ff9f5a; --t1-accent: #20c997; /* ---- Theme 2 — Sakura ----------------------------------------*/ --t2-primary: #ff6ba8; --t2-secondary: #ff8c69; --t2-accent: #ff4fa3; /* ---- Theme 3 — Soleil ----------------------------------------*/ --t3-primary: #ffd060; --t3-secondary: #ff6b6b; --t3-accent: #ffa040; /* ---- Rayons / espacements (depuis app_dimensions.dart) ------ */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-circle: 999px; --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px; --sp-xxxl: 64px; --anim-fast: 200ms; --anim-medium: 350ms; --anim-slow: 600ms; /* ---- Theme actif — par defaut Cosmos + sombre ---------------- */ --primary: var(--t0-primary); --secondary: var(--t0-secondary); --accent: var(--t0-accent); --gradient: linear-gradient( 135deg, var(--t0-primary), var(--t0-accent), var(--t0-secondary) ); --gradient-short: linear-gradient( 135deg, var(--t0-primary), var(--t0-secondary) ); --scaffold: var(--dark-scaffold); --card: var(--dark-card); --card-elevated: var(--dark-card-elevated); --border: var(--dark-border); --border-strong: var(--dark-border-strong); --text-primary: var(--dark-text-primary); --text-secondary: var(--dark-text-secondary); --text-hint: var(--dark-text-hint); } /* ---- Mode clair : bascule via attribut sur -------------- */ html[data-mode="light"] { --scaffold: var(--light-scaffold); --card: var(--light-card); --card-elevated: var(--light-card-elevated); --border: var(--light-border); --border-strong: var(--light-border-strong); --text-primary: var(--light-text-primary); --text-secondary: var(--light-text-secondary); --text-hint: var(--light-text-hint); } /* ---- Themes couleur : bascule via attribut sur ---------- */ html[data-theme="1"] { --primary: var(--t1-primary); --secondary: var(--t1-secondary); --accent: var(--t1-accent); --gradient: linear-gradient( 135deg, var(--t1-primary), var(--t1-accent), var(--t1-secondary) ); --gradient-short: linear-gradient( 135deg, var(--t1-primary), var(--t1-secondary) ); } html[data-theme="2"] { --primary: var(--t2-primary); --secondary: var(--t2-secondary); --accent: var(--t2-accent); --gradient: linear-gradient( 135deg, var(--t2-primary), var(--t2-accent), var(--t2-secondary) ); --gradient-short: linear-gradient( 135deg, var(--t2-primary), var(--t2-secondary) ); } html[data-theme="3"] { --primary: var(--t3-primary); --secondary: var(--t3-secondary); --accent: var(--t3-accent); --gradient: linear-gradient( 135deg, var(--t3-primary), var(--t3-accent), var(--t3-secondary) ); --gradient-short: linear-gradient( 135deg, var(--t3-primary), var(--t3-secondary) ); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Poppins", system-ui, sans-serif; background: var(--scaffold); color: var(--text-primary); transition: background var(--anim-medium) ease, color var(--anim-medium) ease; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-md); } .mono { font-family: "JetBrains Mono", monospace; } /* ============================================================ TYPOGRAPHIE — derivee de app_text_styles.dart ============================================================ */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; color: var(--text-primary); } h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.02em; font-weight: 700; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.01em; } h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 600; } p { color: var(--text-secondary); line-height: 1.65; font-size: 0.98rem; } .eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); } /* ============================================================ NAVBAR — partagee sur les 3 pages ============================================================ */ .navbar { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--scaffold) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-sm) 0; max-width: 1180px; margin: 0 auto; padding-left: var(--sp-md); padding-right: var(--sp-md); } .brand { display: flex; align-items: center; gap: var(--sp-sm); } .brand img { height: 34px; width: auto; } .brand span { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); } .nav-links { display: flex; align-items: center; gap: var(--sp-lg); } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: color var(--anim-fast) ease; } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); } .nav-actions { display: flex; align-items: center; gap: var(--sp-sm); } .icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); color: var(--text-secondary); transition: all var(--anim-fast) ease; } .icon-btn:hover { color: var(--primary); border-color: var(--primary); } .icon-btn svg { width: 18px; height: 18px; } .theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all var(--anim-fast) ease; } .theme-dot[data-t="0"] { background: linear-gradient(135deg, var(--t0-primary), var(--t0-secondary)); } .theme-dot[data-t="1"] { background: linear-gradient(135deg, var(--t1-primary), var(--t1-secondary)); } .theme-dot[data-t="2"] { background: linear-gradient(135deg, var(--t2-primary), var(--t2-secondary)); } .theme-dot[data-t="3"] { background: linear-gradient(135deg, var(--t3-primary), var(--t3-secondary)); } .theme-dot.active { border-color: var(--text-primary); transform: scale(1.15); } .theme-picker { display: flex; align-items: center; gap: 6px; padding: 0 var(--sp-xs); } .burger { display: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 var(--sp-lg); border-radius: var(--radius-lg); font-weight: 600; font-size: 0.92rem; transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease, opacity var(--anim-fast) ease; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--gradient-short); color: #fff; box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--primary) 60%, transparent); } .btn-primary:hover { box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--primary) 70%, transparent); transform: translateY(-1px); } .btn-outline { background: transparent; border: 1.5px solid var(--border-strong); color: var(--text-primary); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-sm { height: 38px; padding: 0 var(--sp-md); font-size: 0.84rem; border-radius: var(--radius-md); } .btn-block { width: 100%; } /* ============================================================ FOOTER — partage ============================================================ */ .footer { border-top: 1px solid var(--border); padding: var(--sp-xxl) 0 var(--sp-lg); margin-top: var(--sp-xxxl); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-xl); margin-bottom: var(--sp-xl); } .footer-brand { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-sm); } .footer-brand img { height: 30px; } .footer-brand span { font-weight: 700; color: var(--text-primary); } .footer p.tagline { font-size: 0.85rem; max-width: 240px; } .footer h4 { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-hint); margin-bottom: var(--sp-md); } .footer ul li { margin-bottom: var(--sp-sm); } .footer ul a { font-size: 0.88rem; color: var(--text-secondary); transition: color var(--anim-fast); } .footer ul a:hover { color: var(--primary); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-sm); padding-top: var(--sp-lg); border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-hint); } .footer-social { display: flex; gap: var(--sp-sm); } .footer-social a { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: all var(--anim-fast) ease; } .footer-social a:hover { border-color: var(--primary); transform: translateY(-2px); } .footer-social img { width: 18px; height: 18px; } /* ============================================================ CARTES generiques ============================================================ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-lg); transition: border-color var(--anim-fast) ease, transform var(--anim-fast) ease; } .card-hover:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-3px); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-circle); font-size: 0.72rem; font-weight: 600; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .nav-links { position: fixed; inset: 64px var(--sp-md) auto var(--sp-md); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); flex-direction: column; align-items: flex-start; gap: 0; padding: var(--sp-sm); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: all var(--anim-medium) ease; } .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-links a { width: 100%; padding: var(--sp-sm) var(--sp-sm); border-radius: var(--radius-md); } .nav-links a:hover { background: var(--card-elevated); } .burger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); color: var(--text-primary); } .burger svg { width: 20px; height: 20px; } .nav-actions .btn-primary span.long { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); } .footer-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .container { padding: 0 var(--sp-md); } }