/* ===================================================================== GLOBAL THEME — noemserver Thème global unifié pour toutes les pages du serveur. Palette : Nord réchauffée · Clair / Sombre / Auto Typo : Outfit (titres) · Plus Jakarta Sans (texte) --------------------------------------------------------------------- Le thème se pilote via l'attribut data-theme sur : → toujours clair → toujours sombre → suit le système (défaut si absent) La classe .dark sur est aussi supportée (compat Tailwind). ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); /* ----------------------------------------------------------------- */ /* 1. TOKENS */ /* ----------------------------------------------------------------- */ :root { /* — Palette de marque (Nord) — */ --nord-frost-1: #8fbcbb; --nord-frost-2: #88c0d0; --nord-frost-3: #81a1c1; --nord-frost-4: #5e81ac; --nord-red: #bf616a; --nord-orange: #d08770; --nord-yellow: #ebcb8b; --nord-green: #a3be8c; --nord-purple: #b48ead; /* — Accent — (contrastes renforcés : bleu Nord plus profond) */ --accent: #406088; --accent-soft: #6da7bd; --accent-strong: #2f4d72; --accent-contrast: #ffffff; /* — Statuts — (saturation/profondeur renforcées) */ --success: #5c8a3f; --warning: #b07d22; --danger: #b04550; --info: #406088; /* — Rayons — */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; /* — Élévation — */ --shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.06), 0 1px 3px rgba(46, 52, 64, 0.05); --shadow: 0 4px 12px rgba(46, 52, 64, 0.08), 0 2px 4px rgba(46, 52, 64, 0.04); --shadow-lg: 0 18px 40px rgba(46, 52, 64, 0.14), 0 6px 14px rgba(46, 52, 64, 0.08); /* — Typo — */ --font-display: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, monospace; /* — Disposition — */ --container: 1180px; --nav-height: 68px; /* — Transitions — */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 0.15s var(--ease); --t: 0.28s var(--ease); } /* ---- THÈME CLAIR (défaut) — contrastes renforcés ---- */ :root { color-scheme: light; --bg: #eef1f6; /* fond légèrement plus marqué */ --bg-tint-1: rgba(64, 96, 136, 0.08); --bg-tint-2: rgba(143, 188, 187, 0.09); --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #e3e8f0; /* creux plus net face au blanc */ --surface-hover: #f1f4f9; --border: #c8d0dd; /* bordures plus visibles */ --border-strong:#aab4c5; --text: #1c2230; /* texte quasi-noir → contraste fort */ --text-color: #1c2230; /* alias historique */ --text-soft: #353d4d; --text-muted: #525c6e; /* texte secondaire plus lisible */ --text-faint: #7e879a; --heading: #141a26; --accent-tint: rgba(64, 96, 136, 0.13); --on-accent: #ffffff; } /* ---- THÈME SOMBRE — contrastes renforcés ---- */ :root[data-theme="dark"], :root.dark { color-scheme: dark; --bg: #161a21; /* fond plus profond → surfaces qui ressortent */ --bg-tint-1: rgba(136, 192, 208, 0.07); --bg-tint-2: rgba(180, 142, 173, 0.07); --surface: #232a35; --surface-raised: #2c3543; --surface-sunken: #141821; --surface-hover: #38414f; --border: #3d4859; /* bordures plus marquées */ --border-strong:#566073; --text: #f4f7fb; /* texte plus clair → contraste fort */ --text-color: #f4f7fb; --text-soft: #dde3ee; --text-muted: #a9b2c4; /* secondaire plus lisible */ --text-faint: #7d8799; --heading: #ffffff; --accent: #9ad0df; /* accent plus clair → ressort sur fond sombre */ --accent-soft: #8fbcbb; --accent-strong: #b3dbe7; --accent-tint: rgba(154, 208, 223, 0.16); --on-accent: #10151c; --success: #b0c897; --warning: #f0d49a; --danger: #d77a82; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow: 0 6px 18px rgba(0, 0, 0, 0.46); --shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.58); } /* ---- AUTO : suit le système quand non forcé en clair (contrastes renforcés) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { color-scheme: dark; --bg: #161a21; --bg-tint-1: rgba(136, 192, 208, 0.07); --bg-tint-2: rgba(180, 142, 173, 0.07); --surface: #232a35; --surface-raised: #2c3543; --surface-sunken: #141821; --surface-hover: #38414f; --border: #3d4859; --border-strong:#566073; --text: #f4f7fb; --text-color: #f4f7fb; --text-soft: #dde3ee; --text-muted: #a9b2c4; --text-faint: #7d8799; --heading: #ffffff; --accent: #9ad0df; --accent-soft: #8fbcbb; --accent-strong: #b3dbe7; --accent-tint: rgba(154, 208, 223, 0.16); --on-accent: #10151c; --success: #b0c897; --warning: #f0d49a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow: 0 6px 18px rgba(0, 0, 0, 0.46); --shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.58); } } /* ----------------------------------------------------------------- */ /* 2. RESET / BASE */ /* ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* :root (0,1,0) gagne sur tout `html, body` injecté → la couleur de fond du thème reste toujours appliquée, même si un harnais force body en transparent. */ :root { background-color: var(--bg); background-image: radial-gradient(900px 500px at 12% -8%, var(--bg-tint-1), transparent 60%), radial-gradient(820px 520px at 100% 0%, var(--bg-tint-2), transparent 55%); background-attachment: fixed; min-height: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text); background-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--t), color var(--t); } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--heading); line-height: 1.15; letter-spacing: -0.018em; margin: 0 0 0.5em; font-weight: 700; text-wrap: balance; } h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); } h3 { font-size: 1.18rem; font-weight: 600; } p { margin: 0 0 1rem; text-wrap: pretty; } a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--accent-strong); } img, svg { max-width: 100%; } ::selection { background: var(--accent-tint); color: var(--heading); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 11px; height: 11px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; } /* ----------------------------------------------------------------- */ /* 3. NAVBAR */ /* ----------------------------------------------------------------- */ .navbar { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .nav-container { max-width: var(--container); margin: 0 auto; height: var(--nav-height); padding: 0 clamp(1rem, 4vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav-logo h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(120deg, var(--heading), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav-menu { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .nav-item { display: flex; } .nav-link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-weight: 500; font-size: 0.95rem; color: var(--text-soft); transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); } .nav-link:hover { color: var(--accent); background: var(--accent-tint); border-color: var(--accent); } .nav-link.linkedin-link { padding: 0.45rem; color: var(--text-muted); } .nav-link.linkedin-link:hover { color: var(--accent); background: var(--accent-tint); } /* ----------------------------------------------------------------- */ /* 4. SÉLECTEUR DE THÈME */ /* ----------------------------------------------------------------- */ .theme-switcher { position: relative; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: var(--radius-pill); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); } /* icônes : on n'affiche que celle du thème courant */ .theme-icon { display: none; } :root[data-theme="light"] .sun-icon, :root.light .sun-icon { display: block; } :root[data-theme="dark"] .moon-icon, :root.dark .moon-icon { display: block; } :root[data-theme="auto"] .auto-icon { display: block; } /* défaut (aucun attribut) → icône auto */ :root:not([data-theme]) .auto-icon { display: block; } .theme-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 168px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 2px; z-index: 120; } .theme-dropdown.show, .theme-dropdown.active, .theme-dropdown[data-open="true"] { display: flex; } .theme-option { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.7rem; border: none; background: transparent; color: var(--text-soft); font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; text-align: left; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .theme-option:hover { background: var(--surface-hover); color: var(--heading); } .theme-option.active { background: var(--accent-tint); color: var(--accent); } /* ----------------------------------------------------------------- */ /* 5. CONTENU PRINCIPAL & HERO */ /* ----------------------------------------------------------------- */ .main-content, .container { max-width: var(--container); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) 4rem; } .hero-section { text-align: center; padding: clamp(2.5rem, 7vw, 5rem) 1rem clamp(2rem, 5vw, 3.5rem); } .hero-section h1 { margin-bottom: 0.6rem; background: linear-gradient(125deg, var(--heading) 35%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-section p { margin: 0 auto; max-width: 46ch; font-size: 1.15rem; color: var(--text-muted); } /* ----------------------------------------------------------------- */ /* 6. SECTIONS */ /* ----------------------------------------------------------------- */ .projects-section { margin-top: clamp(2rem, 5vw, 3.5rem); } .section-header { margin-bottom: 1.4rem; } .section-header h2 { display: flex; align-items: center; gap: 0.65rem; margin: 0; } .section-header h2 svg { color: var(--accent); flex-shrink: 0; } .section-description, .section-header p { margin: 0.4rem 0 0; color: var(--text-muted); font-size: 1rem; } /* ----------------------------------------------------------------- */ /* 7. CARTES */ /* ----------------------------------------------------------------- */ .cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 1.1rem; } .card { display: flex; flex-direction: column; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t); position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); opacity: 0; transition: opacity var(--t); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .card:hover::before { opacity: 1; } .card h3 { margin: 0 0 0.55rem; color: var(--heading); } .card p { margin: 0; color: var(--text-muted); font-size: 0.96rem; line-height: 1.55; } .card-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1.1rem; } .card-buttons:empty { display: none; } .card-button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.95rem; border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 600; transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast); } .card-button-external { background: var(--accent); color: var(--on-accent); } .card-button-external:hover { background: var(--accent-strong); color: var(--on-accent); transform: translateX(2px); } /* ----------------------------------------------------------------- */ /* 8. BOUTONS GÉNÉRIQUES */ /* ----------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft); font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast); text-decoration: none; } .btn:hover { background: var(--surface-hover); color: var(--heading); border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); } .btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--surface-hover); } /* — segments (mode-toggle / logic-group) — */ .mode-toggle, .logic-group { display: inline-flex; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-pill); gap: 2px; } .mode-btn, .logic-btn { padding: 0.4rem 0.9rem; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .mode-btn:hover, .logic-btn:hover { color: var(--heading); } .mode-btn.active, .logic-btn.active { background: var(--surface-raised); color: var(--accent); box-shadow: var(--shadow-sm); } /* ----------------------------------------------------------------- */ /* 9. BADGES & STATUTS */ /* ----------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-muted); } .badge-success { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); border-color: color-mix(in srgb, var(--success) 35%, transparent); } .badge-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .badge-warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 35%, transparent); } .badge-accent { color: var(--accent); background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .status-dot.on { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent); } .status-dot.off { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); } /* ----------------------------------------------------------------- */ /* 10. PANNEAUX & SURFACES UTILITAIRES */ /* ----------------------------------------------------------------- */ .panel, .glass-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .notice { padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: var(--text-soft); } .notice strong { color: var(--heading); } /* ----------------------------------------------------------------- */ /* 11. FOOTER */ /* ----------------------------------------------------------------- */ .footer { max-width: var(--container); margin: 2rem auto 0; padding: 2rem clamp(1rem, 4vw, 2rem); border-top: 1px solid var(--border); text-align: center; color: var(--text-muted); font-size: 0.9rem; } .footer p { margin: 0.2rem 0; } .footer a { color: var(--text-soft); opacity: 0.85; } .footer a:hover { color: var(--accent); opacity: 1; } /* ----------------------------------------------------------------- */ /* 12. UTILITAIRES */ /* ----------------------------------------------------------------- */ .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .anim-fade-up { animation: fadeUp 0.6s var(--ease) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------- */ /* 13. RESPONSIVE */ /* ----------------------------------------------------------------- */ @media (max-width: 640px) { .nav-link span { display: none; } .hero-section { padding-top: 2.5rem; } .cards-container { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------- */ /* 14. ALIAS DE COMPATIBILITÉ (ancien système de tokens) */ /* Mappe les anciens noms de variables encore utilisés par */ /* d'anciennes feuilles (admin-global-override.css, etc.) vers */ /* les tokens du thème global. Comme ce sont des alias, une */ /* seule définition suffit : ils suivent le thème courant. */ /* → à supprimer une fois toutes les CSS migrées vers --bg etc. */ /* ----------------------------------------------------------------- */ :root { --bg-color: var(--bg); --card-bg: var(--surface); --card-border: var(--border); --text-primary: var(--text); --text-secondary: var(--text-muted); --accent-primary: var(--accent); --accent-glow: var(--accent-tint); } /* ----------------------------------------------------------------- */ /* 15. NAV-ACTIONS (composant commun : thème + logout) */ /* ----------------------------------------------------------------- */ .nav-actions { display: inline-flex; align-items: center; gap: 0.5rem; } /* Bouton de déconnexion partagé — autonome (rendu identique sur toutes les pages) */ .nav-logout { display: inline-flex; align-items: center; gap: 0.45rem; height: 40px; padding: 0 0.95rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .nav-logout:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); } @media (max-width: 640px) { .nav-logout span { display: none; } .nav-logout { padding: 0; width: 40px; justify-content: center; } } /* ----------------------------------------------------------------- */ /* 16. SECTION REPLIABLE (collapsible) */ /* ----------------------------------------------------------------- */ .control-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; background: transparent; border: none; cursor: pointer; color: inherit; font: inherit; padding: 0; text-align: left; } .collapse-chevron { transition: transform var(--t-fast); flex-shrink: 0; opacity: 0.7; } .collapsed .collapse-chevron { transform: rotate(-90deg); } .collapsible-body { margin-top: 0.7rem; } .collapsed .collapsible-body { display: none; }