*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0D0618; --bg2: #120720; --card: #1A0A2E; --border: #2D1156; --violet: #7B2FBE; --neon: #A855F7; --neon2: #C084FC; --white: #F5F0FF; --muted: #9B89B4; --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --nav-h: 64px; --preview-w: 1600px; --preview-h: 1000px; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--white); font-family: 'Inter', sans-serif; line-height: 1.6; overflow-x: hidden; } img, iframe { max-width: none; } nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(13,6,24,.75); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 1.1rem 2.5rem; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: -.5px; text-decoration: none; cursor: pointer; color: var(--white); }
.nav-logo:visited { color: var(--white); } .nav-logo span { color: var(--neon); } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { text-decoration: none; color: var(--muted); font-size: .9rem; font-weight: 500; transition: color .2s; } .nav-links a:hover { color: var(--white); } .nav-cta { background: var(--violet); color: #fff; padding: .55rem 1.4rem; border-radius: 8px; text-decoration: none; font-size: .88rem; font-weight: 600; transition: background .2s, box-shadow .2s; } .nav-cta:hover { background: var(--neon); box-shadow: 0 0 20px rgba(168,85,247,.4); } @media(max-width: 768px) { .nav-links { display: none; } .nav-cta { display: none; } .nav-inner { padding: .9rem 1.2rem; } :root { --nav-h: 58px; } } #cat-hero { position: relative; min-height: 78vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 8rem 1.5rem 3rem; } .cat-hero-noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"); background-size: 200px; pointer-events: none; z-index: 0; } .cat-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none; z-index: 0; } .cat-hero-orb.o1 { width: 480px; height: 480px; background: var(--violet); top: -110px; left: -90px; animation: catOrbDrift1 8s ease-in-out infinite alternate; } .cat-hero-orb.o2 { width: 380px; height: 380px; background: var(--neon); bottom: -90px; right: -70px; animation: catOrbDrift2 10s ease-in-out infinite alternate; } @keyframes catOrbDrift1 { to { transform: translate(40px, 30px); } } @keyframes catOrbDrift2 { to { transform: translate(-40px, -30px); } } .page-hero { position: relative; z-index: 2; max-width: 720px; padding: 0; } .eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--neon); margin-bottom: 1.5rem; } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); animation: catEyebrowPulse 2s infinite; } @keyframes catEyebrowPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(.7);} } .page-hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.06; letter-spacing: -1.5px; margin-bottom: 1.2rem; } .page-hero h1 .gradient { background: linear-gradient(135deg, var(--neon2) 0%, var(--neon) 50%, #6D28D9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .page-hero p { color: var(--muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto; line-height: 1.7; } .cat-hero-float { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .cat-hero-card { position: absolute; width: min(300px, 36vw); border-radius: 12px; overflow: hidden; border: 1px solid rgba(168,85,247,.35); background: #0f0f0f; box-shadow: 0 30px 80px rgba(0,0,0,.55); opacity: 0; } .cat-hero-card .tpl-preview { pointer-events: none; } .cat-hero-card-bar { display: flex; gap: .35rem; padding: .5rem .6rem; background: #1A0A2E; border-bottom: 1px solid rgba(168,85,247,.2); } .cat-hero-card-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); } .cat-hero-card-bar span:nth-child(1) { background: #ff5f57; } .cat-hero-card-bar span:nth-child(2) { background: #febc2e; } .cat-hero-card-bar span:nth-child(3) { background: #28c840; } .cat-hero-card-back { top: 10%; left: 3%; filter: brightness(.6) saturate(.85); animation: catHeroBackIn .9s cubic-bezier(.22,1,.36,1) .15s forwards, catHeroBackFloat 7s ease-in-out 1.05s infinite; } .cat-hero-card-front { top: 42%; right: 3%; filter: drop-shadow(0 0 40px rgba(168,85,247,.35)); animation: catHeroFrontIn .9s cubic-bezier(.22,1,.36,1) forwards, catHeroFrontFloat 6s ease-in-out .9s infinite; } @keyframes catHeroBackIn { from{opacity:0;transform:translateY(30px) rotate(-9deg) scale(.86);} to{opacity:1;transform:translateY(0) rotate(-9deg) scale(.9);} } @keyframes catHeroBackFloat { 0%,100%{transform:translateY(0) rotate(-9deg) scale(.9);} 50%{transform:translateY(-14px) rotate(-11deg) scale(.9);} } @keyframes catHeroFrontIn { from{opacity:0;transform:translateY(30px) rotate(7deg) scale(.94);} to{opacity:1;transform:translateY(0) rotate(7deg) scale(1);} } @keyframes catHeroFrontFloat { 0%,100%{transform:translateY(0) rotate(7deg) scale(1);} 50%{transform:translateY(-18px) rotate(5deg) scale(1);} } @media(max-width: 900px) { .cat-hero-card { width: min(240px, 40vw); } .cat-hero-card-back { top: 6%; left: 0; } .cat-hero-card-front { top: auto; bottom: 4%; right: 0; } } @media(max-width: 640px) { #cat-hero { min-height: 0; padding: 6.5rem 1.2rem 2rem; } .eyebrow { font-size: .7rem; margin-bottom: 1.1rem; } .page-hero h1 { letter-spacing: -1px; margin-bottom: 1rem; } .page-hero p { font-size: .92rem; line-height: 1.6; } .cat-hero-float { display: none; } } @media (prefers-reduced-motion: reduce) { .cat-hero-card { animation: none !important; opacity: 1; } .cat-hero-card-back { transform: rotate(-9deg) scale(.9); } .cat-hero-card-front { transform: rotate(7deg) scale(1); } } .filter-bar { position: sticky; top: var(--nav-h); z-index: 90; background: rgba(13,6,24,.92); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); padding: 0 5vw; } .filter-scroll-wrap { position: relative; mask-image: linear-gradient(to right, transparent, black 2%, black 96%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 96%, transparent); } .filter-scroll { display: flex; gap: .6rem; overflow-x: auto; padding: 1.1rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .filter-scroll::-webkit-scrollbar { display: none; } .filter-btn { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; white-space: nowrap; background: rgba(168,85,247,.07); border: 1px solid var(--border); color: var(--muted); padding: .55rem 1.1rem .55rem .7rem; border-radius: 50px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; font-family: 'Inter', sans-serif; } .filter-btn:hover { background: rgba(168,85,247,.16); color: var(--white); border-color: var(--neon); transform: translateY(-1px); } .filter-btn.active { background: linear-gradient(135deg, var(--violet), var(--neon)); color: #fff; border-color: transparent; box-shadow: 0 4px 20px rgba(168,85,247,.4); } .filter-btn .btn-emoji { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .95rem; background: rgba(255,255,255,.06); border-radius: 50%; transition: background .2s; } .filter-btn.active .btn-emoji { background: rgba(255,255,255,.2); } .filter-btn .btn-emoji img { width: 15px; height: 15px; object-fit: contain; display: block; } .filter-btn.active .btn-emoji img { filter: brightness(0) invert(1); } .filter-count { background: rgba(255,255,255,.1); color: inherit; font-size: .65rem; font-weight: 700; padding: .1rem .42rem; border-radius: 50px; min-width: 1.4rem; text-align: center; } .filter-btn.active .filter-count { background: rgba(255,255,255,.25); } @media(max-width: 640px) { .filter-bar { padding: 0 1.2rem; } .filter-scroll { padding: .85rem 0; gap: .45rem; scroll-snap-type: x proximity; } .filter-scroll::after { content: ''; flex: 0 0 .1rem; } .filter-btn { padding: .68rem .9rem .68rem .5rem; min-height: 44px; font-size: .76rem; gap: .45rem; scroll-snap-align: start; } .filter-btn .btn-emoji { width: 24px; height: 24px; } .filter-btn .btn-emoji img { width: 14px; height: 14px; } } .catalogue-wrapper { max-width: 1440px; margin: 0 auto; padding: 0 5vw 8rem; } .big-category { padding: 3.5rem 0 2rem; transition: opacity .2s ease; } .big-category.fade-out { opacity: 0; } .big-cat-header { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem; } .big-cat-emoji { font-size: 2rem; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(168,85,247,.1); border: 1px solid var(--border); border-radius: var(--r-md); flex-shrink: 0; } .big-cat-title { margin: 0; font-family: 'Syne', sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; } .big-cat-sub { color: var(--muted); font-size: .85rem; margin-top: .2rem; } .big-cat-divider { height: 1px; background: linear-gradient(to right, var(--neon), transparent); opacity: .3; margin-bottom: 2rem; } .subcats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; } .subcat-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; background: rgba(168,85,247,.06); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: .75rem; font-weight: 500; color: var(--muted); } .subcat-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; } .category-header { display: flex; align-items: center; gap: 1rem; padding: 2rem 0 1.5rem; flex-wrap: wrap; } .category-title { margin: 0; font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: -.3px; color: var(--white); white-space: nowrap; } .category-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); min-width: 24px; } .category-count { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); white-space: nowrap; } .templates-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; margin-bottom: 2.5rem; } @media (max-width: 1280px) { .templates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .templates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .templates-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; } } @media(max-width: 640px) { .catalogue-wrapper { padding: 0 1.2rem 5rem; } .big-category { padding: 2.4rem 0 1.2rem; } .big-cat-header { gap: .85rem; margin-bottom: 1.4rem; } .big-cat-emoji { width: 44px; height: 44px; font-size: 1.5rem; border-radius: var(--r-sm); } .big-cat-title { font-size: 1.25rem; } .big-cat-sub { font-size: .78rem; } .big-cat-divider { margin-bottom: 1.4rem; } .subcats { gap: .4rem; margin-bottom: 1.6rem; } .subcat-chip { font-size: .7rem; padding: .3rem .7rem; } .category-header { padding: 1.4rem 0 1rem; gap: .5rem .8rem; } .category-title { white-space: normal; font-size: 1rem; flex: 1 1 auto; } .category-line { display: none; } .category-count { font-size: .68rem; } } .tpl-card { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; cursor: pointer; } .tpl-card:hover { transform: translateY(-6px); border-color: var(--neon); box-shadow: 0 20px 50px rgba(168,85,247,.15); } .tpl-card::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--violet), var(--neon)); } .tpl-preview { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: #0f0f0f; } .tpl-preview-frame { position: absolute; top: 0; left: 0; width: var(--preview-w); height: var(--preview-h); border: none; pointer-events: none; transform-origin: top left; transform: scale(0.2); background: #0f0f0f; } .tpl-index { position: absolute; top: .6rem; right: .6rem; z-index: 2; background: rgba(13,6,24,.75); color: var(--neon2); font-family: 'Syne', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .05em; padding: .15rem .5rem; border-radius: var(--r-xs); border: 1px solid rgba(168,85,247,.3); } .tpl-overlay { position: absolute; inset: 0; background: rgba(13,6,24,.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; z-index: 3; } .tpl-card:hover .tpl-overlay { opacity: 1; } .overlay-btn { background: var(--neon); color: #fff; padding: .65rem 1.6rem; border-radius: var(--r-sm); font-weight: 700; font-size: .88rem; font-family: 'Syne', sans-serif; text-decoration: none; transition: background .2s, transform .2s; } .overlay-btn:hover { background: var(--violet); transform: scale(1.05); } .tpl-body { display: flex; flex-direction: column; flex: 1; padding: 1.05rem; } .tpl-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; } .tpl-name { font-family: 'Syne', sans-serif; font-size: .9rem; font-weight: 700; } .tpl-badge { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .16rem .55rem; border-radius: var(--r-xs); background: rgba(168,85,247,.12); color: var(--neon2); white-space: nowrap; } .tpl-desc { color: var(--muted); font-size: .78rem; line-height: 1.5; margin-bottom: .85rem; } .tpl-footer { margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .tpl-tags { display: flex; gap: .35rem; flex-wrap: wrap; } .tpl-tag { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; padding: .18rem .55rem; border-radius: var(--r-xs); background: rgba(168,85,247,.08); color: var(--muted); font-weight: 600; } .btn-voir { display: inline-block; padding: .3rem 0; font-size: .8rem; font-weight: 700; color: var(--neon2); text-decoration: none; font-family: 'Syne', sans-serif; transition: color .2s; white-space: nowrap; } .btn-voir:hover { color: var(--white); } @media(max-width: 640px) { .tpl-overlay { opacity: 1; background: rgba(13,6,24,.35); align-items: flex-end; justify-content: flex-start; padding: .7rem; } .overlay-btn { padding: .65rem 1.1rem; font-size: .78rem; min-height: 40px; display: inline-flex; align-items: center; } .tpl-body { padding: 1.05rem; } .tpl-meta { margin-bottom: .5rem; } .tpl-name { font-size: .92rem; } .tpl-badge { font-size: .6rem; padding: .15rem .5rem; } .tpl-desc { font-size: .8rem; margin-bottom: .8rem; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .tpl-footer { margin-top: .8rem; padding-top: .8rem; } .tpl-tags { gap: .3rem; } .tpl-tag { font-size: .6rem; padding: .15rem .45rem; } } .empty-state { text-align: center; padding: 6rem 2rem; display: none; } .empty-state.visible { display: block; } .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; } .empty-title { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800; margin-bottom: .5rem; } .empty-sub { color: var(--muted); } @media(max-width: 640px) { .empty-state { padding: 4rem 1.2rem; } .empty-icon { font-size: 2.4rem; } .empty-title { font-size: 1.2rem; } .empty-sub { font-size: .88rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* === Barre promo (injectée par nav.js) === */
nav{top:38px;transition:top .35s ease;}
.promo-hidden nav{top:0;}
.promo-bar{position:fixed;top:0;left:0;right:0;z-index:101;height:38px;background:linear-gradient(180deg,#0D0618 0%,#120720 100%);overflow:hidden;display:flex;align-items:center;border-bottom:1px solid var(--border);transition:transform .35s ease,opacity .35s ease,height .35s ease,padding .35s ease}
.promo-bar.hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.promo-stars{position:absolute;inset:0;pointer-events:none}
.promo-star{position:absolute;border-radius:50%;background:#F5F0FF;animation:promoStarTwinkle ease-in-out infinite}
@keyframes promoStarTwinkle{0%,100%{opacity:.15;transform:scale(.7)} 50%{opacity:1;transform:scale(1.15)}}
.promo-bar::before{content:'';position:absolute;inset:-50% -10%;background:radial-gradient(circle at 20% 50%,rgba(168,85,247,.18),transparent 55%),radial-gradient(circle at 80% 50%,rgba(123,47,190,.18),transparent 55%);animation:promoGlowDrift 10s ease-in-out infinite alternate;pointer-events:none}
@keyframes promoGlowDrift{0%{transform:translateX(-3%)} 100%{transform:translateX(3%)}}
.promo-bar-track{position:relative;z-index:1;width:100%;overflow:hidden;mask-image:linear-gradient(to right,transparent,black 4%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 4%,black 92%,transparent)}
.promo-bar-content{display:flex;align-items:center;gap:.6rem;width:max-content;white-space:nowrap;animation:promoBarScroll 26s linear infinite}
.promo-bar:hover .promo-bar-content{animation-play-state:paused}
@keyframes promoBarScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.promo-item{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--white);letter-spacing:.01em;padding:0 .6rem}
.promo-icon{font-size:.85rem;filter:drop-shadow(0 0 5px rgba(168,85,247,.6))}
.promo-sep{color:var(--neon);opacity:.5;font-size:.7rem}
.promo-close{position:relative;z-index:2;flex-shrink:0;width:22px;height:22px;margin-right:.9rem;border-radius:50%;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.3);color:var(--muted);font-size:.62rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.promo-close:hover{background:var(--violet);border-color:var(--violet);color:#fff}
@media(max-width:640px){ .promo-bar{height:34px;} .promo-item{font-size:.72rem;} }