/* ======================================== Fonts ======================================== */ @font-face { font-family: 'CS'; src: url('../fonts/cs_regular.ttf'); font-display: swap; } @font-face { font-family: 'ethnocentric'; src: url('../fonts/ethnocentric.otf'); font-display: swap; } @font-face { font-family: 'Neuropol'; src: url('../fonts/GiantRobotArmy-Medium.ttf'); font-display: swap; } /* ======================================== Reset ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100%; } /* ======================================== THEME TOKENS (défaut sombre unique) ======================================== */ :root { /* Accents (dégradé) */ --accent-1: #69EACB; --accent-2: #EACCF8; --accent-3: #6654F1; /* Neutres */ --text: #eaf0ff; --muted: #b9c2dc; --surface: rgba(255, 255, 255, .06); --surface-strong: rgba(255, 255, 255, .12); --border: rgba(255, 255, 255, .18); /* States */ --ring: #7fceff; /* Chips */ --chip-bg: rgba(255, 255, 255, .09); --chip-brd: rgba(255, 255, 255, .18); --chip-text: #f2f6ff; /* Effets */ --glass-blur: 12px; --toolbar-blur: 10px; --shine: rgba(255, 255, 255, .18); --veil: rgba(0, 0, 0, .45); /* Header/Toolbar bg */ --header-bg-1: rgba(10, 15, 26, .55); --header-bg-2: rgba(10, 15, 26, .35); --toolbar-bg-1: rgba(15, 20, 34, .35); --toolbar-bg-2: rgba(15, 20, 34, .22); /* Ombres */ --shadow: 0 18px 60px -18px rgba(0, 0, 0, .55); --shadow-strong: 0 30px 80px -24px rgba(0, 0, 0, .65); --toolbar-shadow: 0 12px 40px -18px rgba(0, 0, 0, .45); /* Dégradés composés */ --brand-gradient: linear-gradient(90deg, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-3) 100%); --bg-gradient: radial-gradient(1200px 800px at 0% -10%, color-mix(in oklab, var(--accent-1), transparent 70%), transparent 60%), radial-gradient(1200px 900px at 110% 0%, color-mix(in oklab, var(--accent-2), transparent 70%), transparent 60%), linear-gradient(180deg, #0a0f1a, #0b1120 40%, #0b1126 100%); /* Barre de lisibilité du titre */ --title-bar-height: 56px; --title-bar-bg: color-mix(in oklab, var(--surface), transparent 20%); --title-bar-border: color-mix(in oklab, var(--border), transparent 25%); /* Layout */ --header-h: clamp(92px, 14vh, 160px); --toolbar-h: 64px; --radius: 22px; --content-min: clamp(160px, 22vh, 240px); /* Vitesses */ --elev: 320ms cubic-bezier(.2, .7, .2, 1); --swift: 180ms cubic-bezier(.2, .7, .2, 1); /* Indice de préférence pour les navigateurs */ color-scheme: dark; } /* Mode clair optionnel — NE s'applique que si */ @media (prefers-color-scheme: light) { :root[data-system-theme="on"] { --text: #0e1530; --muted: #3b4760; --surface: rgba(255, 255, 255, .85); --surface-strong: rgba(255, 255, 255, .96); --border: rgba(10, 16, 40, .12); --chip-bg: rgba(10, 16, 40, .06); --chip-brd: rgba(10, 16, 40, .12); --chip-text: #1b2548; --bg-gradient: linear-gradient(180deg, #f8faff, #eef2ff 35%, #e9ecff 100%); --shadow: 0 16px 50px -18px rgba(10, 16, 40, .18); --shadow-strong: 0 28px 70px -22px rgba(10, 16, 40, .24); --toolbar-shadow: 0 10px 36px -18px rgba(10, 16, 40, .22); --header-bg-1: rgba(255, 255, 255, .65); --header-bg-2: rgba(255, 255, 255, .45); --toolbar-bg-1: rgba(255, 255, 255, .55); --toolbar-bg-2: rgba(255, 255, 255, .40); --title-bar-bg: color-mix(in oklab, var(--surface), #fff 8%); --title-bar-border: rgba(10, 16, 40, .12); color-scheme: light; } } /* ======================================== Base ======================================== */ html { background: var(--bg-gradient) fixed; background-size: cover; } body { color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Neuropol', Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ======================================== Header FIXE + Toolbar FIXE ======================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); display: flex; align-items: center; overflow: clip; /* Safe-area iOS + padding */ padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1); backdrop-filter: blur(var(--glass-blur)) saturate(1.1); background: linear-gradient(180deg, var(--header-bg-1), var(--header-bg-2)); border-bottom: 1px solid color-mix(in oklab, var(--border), transparent 35%); } .site-header .wrap { max-width: 1080px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .brand { font-family: 'ethnocentric', system-ui, sans-serif; font-size: clamp(1.2rem, 2.8vw, 2.1rem); line-height: 1.1; letter-spacing: .5px; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-flex; align-items: center; gap: .6rem; word-break: break-word; } .brand__emoji { filter: saturate(1.2) drop-shadow(0 6px 16px rgba(0, 0, 0, .25)); } .tagline { color: var(--muted); font-family: 'Neuropol', system-ui, sans-serif; font-size: .95rem; } .bg-blobs { position: absolute; inset: 0; pointer-events: none; filter: blur(40px) saturate(1.2) opacity(.6); } .blob { position: absolute; width: 420px; height: 420px; border-radius: 999px; mix-blend-mode: screen; animation: float 18s ease-in-out infinite; } .blob.b1 { left: -120px; top: -120px; background: radial-gradient(circle at 30% 30%, var(--accent-1), transparent 60%); } .blob.b2 { right: -160px; top: -80px; background: radial-gradient(circle at 70% 40%, var(--accent-2), transparent 60%); animation-delay: -6s; } .blob.b3 { left: 20%; bottom: -220px; background: radial-gradient(circle at 40% 60%, var(--accent-3), transparent 60%); animation-delay: -12s; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.02); } } .toolbar { position: fixed; z-index: 900; top: var(--header-h); left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 1080px; height: var(--toolbar-h); display: flex; align-items: center; gap: 12px; padding: 12px 14px; -webkit-backdrop-filter: blur(var(--toolbar-blur)) saturate(1.05); backdrop-filter: blur(var(--toolbar-blur)) saturate(1.05); background: linear-gradient(180deg, var(--toolbar-bg-1), var(--toolbar-bg-2)); border: 1px solid color-mix(in oklab, var(--border), transparent 25%); border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; box-shadow: var(--toolbar-shadow); } .search { position: relative; flex: 1 1 auto; } .search input { width: 100%; height: 40px; padding: 10px 42px 10px 14px; background: color-mix(in oklab, var(--surface), transparent 10%); border: 1px solid var(--border); border-radius: 999px; color: var(--text); outline: none; transition: box-shadow var(--swift), border-color var(--swift), background var(--swift); backdrop-filter: blur(6px); } .search input::placeholder { color: color-mix(in oklab, var(--muted), transparent 35%); } .search input:focus { border-color: color-mix(in oklab, var(--ring), transparent 35%); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring), transparent 80%); background: color-mix(in oklab, var(--surface-strong), transparent 10%); } .search .icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: var(--muted); } /* ======================================== Layout ======================================== */ .container { max-width: 1080px; margin: 0 auto; padding: calc(var(--header-h) + var(--toolbar-h) + 26px) 16px 64px; } /* ======================================== Grid ======================================== */ .cards-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; } .cards-grid>.card_link { grid-column: span 12; } @media (min-width: 560px) { .cards-grid>.card_link { grid-column: span 6; } } @media (min-width: 960px) { .cards-grid>.card_link { grid-column: span 4; } } .card_link { display: block; color: inherit; text-decoration: none; outline: none; } .card_link:focus-visible .card { box-shadow: 0 0 0 6px color-mix(in oklab, var(--ring), transparent 80%), var(--shadow-strong); } /* ======================================== Card ======================================== */ .card { position: relative; display: grid; grid-template-rows: auto minmax(var(--content-min), 1fr) auto; border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow); overflow: clip; transform: translateY(0); transition: transform var(--elev), box-shadow var(--elev), background var(--elev), border-color var(--elev); isolation: isolate; border: 1px solid var(--border); } /* Spotlight doux */ .card::after { content: ""; position: absolute; inset: -40% -20%; background: radial-gradient(600px 300px at 60% 30%, color-mix(in oklab, #fff, transparent 88%), transparent 60%); pointer-events: none; opacity: .6; transition: opacity var(--swift); } .card:hover::after { opacity: .85; } /* Hover */ .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-strong); background: var(--surface-strong); border-color: color-mix(in oklab, var(--ring), transparent 65%); } /* Cover */ .card .cover { position: relative; aspect-ratio: 16 / 9; overflow: clip; } .card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform var(--elev), filter var(--swift); filter: saturate(1.05) contrast(1.02) brightness(.98); } .card:hover .cover img { transform: scale(1.06); filter: saturate(1.1) contrast(1.05) brightness(1); } /* Voiles globaux */ .card .cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--veil)), repeating-linear-gradient(115deg, transparent 0 12px, color-mix(in oklab, #fff, transparent 96%) 12px 13px); mix-blend-mode: overlay; } /* Shine */ .card .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, var(--shine) 50%, transparent 65%); transform: translateX(-120%); transition: transform 900ms ease; pointer-events: none; } .card:hover .cover::after { transform: translateX(120%); } /* ====== Titre + BARRE LISIBILITÉ ====== */ .card .title { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; font-family: 'CS', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.24rem); letter-spacing: .2px; color: #fff; /* reste blanc, net, même au hover */ text-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: letter-spacing var(--swift), color var(--swift); } /* Fond transparent du titre (plein largeur, sans arrondis) */ .card .title::before { content: ""; position: absolute; left: -14px; right: -14px; bottom: -12px; height: var(--title-bar-height); /* Couleur transparente basée sur la couleur de la card */ background: color-mix(in oklab, #090e1b, transparent 70%); border-top: 1px solid color-mix(in oklab, var(--border), transparent 25%); /* Plus AUCUN border-radius */ /* (supprimé) border-top-left-radius / border-top-right-radius */ z-index: -1; backdrop-filter: blur(2px); } .card:hover .title::before { /* Légèrement plus marqué au survol, toujours basé sur la card */ background: color-mix(in oklab, var(--surface-strong), transparent 34%); border-top-color: color-mix(in oklab, var(--border), transparent 18%); } /* Au survol : on garde le texte net, on peut juste resserrer la lettre */ .card:hover .title { letter-spacing: .3px; } /* Au survol : la barre suit la teinte de la carte hover (plus “forte”) */ .card:hover .title::before { /* Légèrement plus marqué au survol, toujours basé sur la card */ background: color-mix(in oklab, #090e1b, transparent 80%); border-top-color: color-mix(in oklab, var(--border), transparent 18%); } /* Content */ .card .content { padding: 22px 16px 18px; color: var(--muted); font-family: 'Neuropol', system-ui, sans-serif; font-size: .96rem; display: flex; align-items: flex-start; } .card .content p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.65; } /* Stack */ .stack { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 12px 14px 0; margin: 0 0 14px 0; } .chip { display: inline-flex; align-items: center; gap: .45rem; padding: 7px 11px; border-radius: 999px; font-size: .78rem; line-height: 1; border: 1px solid var(--chip-brd); background: var(--chip-bg); color: var(--chip-text); backdrop-filter: blur(6px); transition: transform var(--swift), box-shadow var(--swift), border-color var(--swift), background var(--swift); } .chip:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .5); border-color: color-mix(in oklab, var(--ring), transparent 55%); background: color-mix(in oklab, var(--chip-bg), white 6%); } /* Footer */ .footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid color-mix(in oklab, var(--border), transparent 20%); padding: 12px 14px; background: linear-gradient(180deg, color-mix(in oklab, var(--surface), transparent 10%), transparent); color: var(--muted); } .footer p { font-size: .86rem; } .footer .cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: color-mix(in oklab, var(--surface), transparent 5%); border: 1px solid var(--border); font-weight: 700; font-size: .86rem; letter-spacing: .15px; transition: transform var(--swift), background var(--swift), border-color var(--swift), color var(--swift); } .footer .cta svg { width: 16px; height: 16px; fill: currentColor; transform: translateX(-2px); transition: transform var(--swift); } .card:hover .footer .cta { transform: translateX(2px); background: color-mix(in oklab, var(--surface-strong), transparent 10%); } /* Footer site */ .site-footer { padding: 28px 16px 48px; color: var(--muted); background-color: color-mix(in oklab, var(--surface), transparent 5%); } .site-footer .wrap { max-width: 1080px; margin: 0 auto; } /* Accessibility & motion */ .card_link:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { .card, .card * { transition: none !important; animation: none !important; } } /* ======================================== Mobile tweaks / Responsiveness ======================================== */ @media (max-width: 520px) { :root { --header-h: clamp(68px, 14vh, 104px); --toolbar-h: 56px; } /* L'emoji se positionne par rapport au header (déjà positionné) */ .brand__emoji{ position: absolute; left: calc(12px + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); width: 22px; height: 22px; /* ajuste si besoin */ display: inline-block; margin: 0; /* neutralise les gaps éventuels */ } .brand { /* plus petit, varie moins avec la largeur */ font-size: clamp(0.95rem, 4.6vw, 1.2rem); line-height: 1.05; letter-spacing: .3px; /* aides au retour à la ligne */ word-break: break-word; overflow-wrap: anywhere; text-wrap: balance; } .tagline { font-size: .85rem; padding: 0 8px; } /* Moins de déco lourde sur mobile */ .bg-blobs { display: none; } /* Toolbar full width + safe-area */ .toolbar { top: var(--header-h); left: 0; right: 0; transform: none; width: 100%; max-width: none; border-radius: 0 0 14px 14px; padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); } .search input { height: 38px; } .card .content { padding: 20px 14px 16px; } .card .content p { -webkit-line-clamp: 5; } .stack { margin-bottom: 12px; } }