/* =============================== Palette & thème (clair / sombre) =============================== */ :root { --bg: #fafafa; --text: #111; --muted: #555; --card: #ffffff; --border: #e9e9e9; /* Accents "vert tendre" + "lilas" */ --accent: #6df7a8; /* vert tendre flashy */ --accent-2: #b283ff; /* lilas */ --accent-3: #8ef8c8; /* vert + lumière */ --link: #7c4dff; /* lilas lisible en clair */ --link-hover: #5b32e6; /* Glow mesuré */ --glow: 0 0 12px rgba(109, 247, 168, 0.45); --glow-2: 0 0 16px rgba(178, 131, 255, 0.35); } @media (prefers-color-scheme: dark) { :root { --bg: #0e0f12; --text: #e9e9ee; --muted: #b7b7c2; --card: #14161b; --border: #262933; --link: #bda5ff; /* lilas plus clair */ --link-hover: #d1c1ff; --glow: 0 0 14px rgba(109, 247, 168, 0.55); --glow-2: 0 0 18px rgba(178, 131, 255, 0.45); } } /* Option: forcer le thème sombre via .theme-dark sur si tu veux un bouton */ .theme-dark { --bg: #0e0f12; --text: #e9e9ee; --muted: #b7b7c2; --card: #14161b; --border: #262933; --link: #bda5ff; --link-hover: #d1c1ff; } /* =============================== Base & lisibilité =============================== */ html, body { background: var(--bg); color: var(--text); } p, li { line-height: 1.7; } /* Marges mobiles propres (évite “collé aux bords”) */ .pa3, .pa4, .ph3, .ph4 { /* Ananke utilise Tachyons */ padding-left: 1rem !important; padding-right: 1rem !important; } @media (min-width: 48em) { .pa3, .pa4, .ph3, .ph4 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } } /* =============================== Liens, boutons, surlignages =============================== */ a { color: var(--link); text-decoration-color: rgba(124, 77, 255, 0.35); text-underline-offset: 2px; } a:hover { color: var(--link-hover); text-decoration-color: rgba(124, 77, 255, 0.6); text-shadow: var(--glow-2); } /* “Bouton” universel */ .button, .btn, .ananke-button { display: inline-block; padding: .6rem 1rem; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #101014; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glow); } .button:hover, .btn:hover, .ananke-button:hover { transform: translateY(-1px); box-shadow: var(--glow), var(--glow-2); } /* =============================== Titres & petits effets néon =============================== */ h1, h2, h3 { letter-spacing: .2px; } h1 { text-shadow: 0 0 1px rgba(255,255,255,0.05), var(--glow); } h2 { text-shadow: 0 0 1px rgba(255,255,255,0.04), var(--glow-2); } /* =============================== Cards / blocs / tableaux / code =============================== */ .card, .bg-near-white, .bg-white, .bg-near-black { background: var(--card) !important; border: 1px solid var(--border); border-radius: 14px; } /* Tableaux responsives (stop débordements) */ table { width: 100%; border-collapse: collapse; margin: 1rem 0; display: block; /* wrap dans un conteneur scrollable */ overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; } th, td { border-bottom: 1px solid var(--border); padding: .6rem .75rem; text-align: left; } thead th { background: rgba(109, 247, 168, 0.09); } /* Code blocks */ pre, code { background: #0b0d12; color: #e6f3ff; } pre { padding: .9rem 1rem; border-radius: 10px; overflow: auto; border: 1px solid #1e2230; box-shadow: inset 0 0 12px rgba(178, 131, 255, 0.12); } code { padding: .15rem .35rem; border-radius: 6px; } /* Citations */ blockquote { border-left: 4px solid var(--accent); background: linear-gradient(90deg, rgba(109,247,168,.08), transparent); padding: .6rem 1rem; border-radius: 8px; } /* Séparateurs */ hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: var(--glow); margin: 2rem 0; } /* =============================== Navigation Ananke (header) =============================== */ nav a, .pv3 a, .ph3 a { /* garantir contraste en sombre */ color: var(--text); } nav a:hover { color: var(--link-hover); text-shadow: var(--glow-2); } /* =============================== Grilles de vignettes sommaire =============================== */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; } .card-link { display: block; text-decoration: none; color: inherit; padding: 1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--card); } .card-link:hover { box-shadow: var(--glow); transform: translateY(-1px); } /* ==== NAV TOUJOURS LISIBLE, PAR-DESSUS LE HERO ==== */ header nav, nav.pv3, nav { position: sticky; /* reste visible */ top: 0; z-index: 9999 !important; background: rgba(12, 13, 16, 0.85) !important; /* fond sombre semi-opaque */ -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); border-bottom: 1px solid rgba(255,255,255,0.08); } /* liens du menu : forcer le contraste */ header nav a, nav a, nav .link, nav .dark-gray { color: #f5f7fb !important; text-shadow: 0 1px 2px rgba(0,0,0,.45); } header nav a:hover, nav a:hover { color: #6df7a8 !important; /* vert tendre */ } /* le hero peut rester sous la nav sans la recouvrir */ .cover, .cover .absolute--fill, .bg-top { z-index: 1; } header nav { z-index: 9999 !important; } /* voile léger sur l'image du hero pour lisibilité des titres */ .cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient( rgba(0,0,0,0.40), rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.10) ); pointer-events: none; } /* éviter que le contenu passe sous la nav sticky */ main, .mw9.center { scroll-margin-top: 72px; } /* .analyses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .analyse-item { background: #fff; padding: 1rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .analyse-item:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); } .analyse-item h3 { margin-bottom: 0.5rem; font-size: 1.2rem; color: #333; } .analyse-item p { margin: 0; font-size: 0.95rem; color: #666; } */ .analyses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1rem} .analyse-item{background:#fff;padding:1rem 1.25rem;border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08);text-align:center;transition:transform .2s,box-shadow .2s} .analyse-item:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.12)} .analyse-item h3{margin:0 0 .5rem;font-size:1.15rem;color:#333} .analyse-item p{margin:0;color:#666;font-size:.95rem}