/* ============================================================ TARTOLADE — Design moderne, cartoon-accents ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=Lilita+One&family=Quicksand:wght@400;500;600;700&display=swap'); /* ================================================================ TOKENS CENTRALISÉS --jaune / --rose / --vert : couleurs d'accent (varient par thème) --noir : couleur du texte principal (swap light/dark par thème) --blanc : couleur des surfaces (cards, inputs) --gris-* : teintes neutres adaptées au thème --bg-page : fond de page Pour changer l'apparence : définir data-theme="X" sur ================================================================ */ :root, body[data-theme="pop"] { --jaune: #E6F902; --rose: #FB23AA; --vert: #75F94D; --noir: #0A0A0A; --blanc: #FFFFFF; --gris-bord: #E8E8E8; --gris-texte: #666666; --gris-bg: #FAFAFA; --bg-page: var(--jaune); --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06); } /* Thème sombre : noir devient clair, blanc devient sombre */ body[data-theme="sombre"] { --jaune: #FFE14D; --rose: #FF5CB8; --vert: #8BFF5A; --noir: #F0F0F0; --blanc: #1C1C1C; --gris-bord: #333333; --gris-texte: #AAAAAA; --gris-bg: #242424; --bg-page: #0E0E0E; --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.6); } /* Thème clair : blanc dominant, touches colorées */ body[data-theme="clair"] { --jaune: #FFF59B; --rose: #FF7BB8; --vert: #A8F08C; --noir: #1A1A1A; --blanc: #FFFFFF; --gris-bord: #E5E5E5; --gris-texte: #555555; --gris-bg: #F6F6F6; --bg-page: #FAFAFA; --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08); } /* Thème pastel : doux et tendre */ body[data-theme="pastel"] { --jaune: #FFF0A8; --rose: #FFB3D9; --vert: #B8F0C8; --noir: #3A3A3A; --blanc: #FFFFFF; --gris-bord: #EFE5E0; --gris-texte: #8A7A70; --gris-bg: #FFF9F0; --bg-page: #FFF5E8; --shadow-soft: 0 1px 3px rgba(180, 130, 120, 0.08); --shadow-card: 0 4px 16px rgba(180, 130, 120, 0.12); } /* Thème rétro : 70's moutarde/framboise/crème */ body[data-theme="retro"] { --jaune: #F5C744; --rose: #D94F7F; --vert: #70A25C; --noir: #3E2A1F; --blanc: #FFF8E8; --gris-bord: #E3D4B5; --gris-texte: #7A5D47; --gris-bg: #F7EBD0; --bg-page: #F4E8D0; --shadow-soft: 0 1px 3px rgba(62, 42, 31, 0.08); --shadow-card: 0 4px 16px rgba(62, 42, 31, 0.15); } /* Thème océan : marine + turquoise + sable */ body[data-theme="ocean"] { --jaune: #F4E4B8; --rose: #00B2CA; --vert: #7FD8C9; --noir: #0A2E3F; --blanc: #FFFFFF; --gris-bord: #D7E3E8; --gris-texte: #4A6572; --gris-bg: #EEF6F8; --bg-page: #CDEAF0; --shadow-soft: 0 1px 3px rgba(10, 46, 63, 0.08); --shadow-card: 0 4px 16px rgba(10, 46, 63, 0.14); } /* Thème coucher de soleil : corail + violet + orange */ body[data-theme="coucher"] { --jaune: #FFC371; --rose: #FF5F6D; --vert: #C06C84; --noir: #2D1B3D; --blanc: #FFF4EB; --gris-bord: #EED4C3; --gris-texte: #6D4A5E; --gris-bg: #FDEBD8; --bg-page: #FFC8A2; --shadow-soft: 0 1px 3px rgba(45, 27, 61, 0.08); --shadow-card: 0 4px 16px rgba(45, 27, 61, 0.15); } /* Thème forêt : vert sapin + terracotta + crème */ body[data-theme="foret"] { --jaune: #D4A574; --rose: #D2691E; --vert: #6A994E; --noir: #2A3D1F; --blanc: #FFF8EE; --gris-bord: #D7CBB1; --gris-texte: #5C6E47; --gris-bg: #F4EBD6; --bg-page: #E8DEC2; --shadow-soft: 0 1px 3px rgba(42, 61, 31, 0.08); --shadow-card: 0 4px 16px rgba(42, 61, 31, 0.15); } /* Thème néon cyberpunk : magenta + cyan + noir profond */ body[data-theme="neon"] { --jaune: #F8F32B; --rose: #FF00E4; --vert: #00F0FF; --noir: #F5F5FF; --blanc: #0A0014; --gris-bord: #2A1F4A; --gris-texte: #A89DC9; --gris-bg: #150828; --bg-page: #05000F; --shadow-soft: 0 0 12px rgba(255, 0, 228, 0.25); --shadow-card: 0 0 24px rgba(0, 240, 255, 0.3); } /* Thème matcha : vert matcha + lavande + beige crème */ body[data-theme="matcha"] { --jaune: #F0E4B8; --rose: #B59EE0; --vert: #87A96B; --noir: #3A4A2F; --blanc: #FDFAF2; --gris-bord: #DDD6C3; --gris-texte: #6A7A5C; --gris-bg: #F4F0E3; --bg-page: #E6E9C8; --shadow-soft: 0 1px 3px rgba(58, 74, 47, 0.06); --shadow-card: 0 4px 16px rgba(58, 74, 47, 0.12); } /* Thème myrtille : violet profond + orchidée + crème */ body[data-theme="myrtille"] { --jaune: #E8D3F5; --rose: #C73EFF; --vert: #FFB3E6; --noir: #1F0A2E; --blanc: #FFFFFF; --gris-bord: #DDCCE6; --gris-texte: #6A4A7A; --gris-bg: #F5EBFA; --bg-page: #D9B3FF; --shadow-soft: 0 1px 3px rgba(31, 10, 46, 0.08); --shadow-card: 0 4px 16px rgba(31, 10, 46, 0.15); } /* Thème braise : rouge brique + or + noir profond */ body[data-theme="braise"] { --jaune: #FFB627; --rose: #E63946; --vert: #FF8C42; --noir: #F8E9D0; --blanc: #1C0E0A; --gris-bord: #3A2015; --gris-texte: #C09775; --gris-bg: #2A140E; --bg-page: #12070A; --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-card: 0 4px 20px rgba(230, 57, 70, 0.25); } /* Thème glacé : bleu glacier + menthe + blanc */ body[data-theme="glace"] { --jaune: #DFF6F0; --rose: #5EC7D8; --vert: #9BE4D4; --noir: #1B3A4B; --blanc: #FFFFFF; --gris-bord: #D6E6EC; --gris-texte: #547685; --gris-bg: #EFF7F9; --bg-page: #E0F4F8; --shadow-soft: 0 1px 3px rgba(27, 58, 75, 0.06); --shadow-card: 0 4px 16px rgba(27, 58, 75, 0.12); } /* Thème café : marron café + crème + caramel */ body[data-theme="cafe"] { --jaune: #D4A574; --rose: #8B4513; --vert: #C08457; --noir: #3E2514; --blanc: #FFF5E6; --gris-bord: #DCC8AE; --gris-texte: #6B4A2E; --gris-bg: #F5E6D0; --bg-page: #E8D5B7; --shadow-soft: 0 1px 3px rgba(62, 37, 20, 0.1); --shadow-card: 0 4px 16px rgba(62, 37, 20, 0.18); } /* Thème bubble-gum : rose bonbon + violet + bleu ciel */ body[data-theme="bubble"] { --jaune: #FFE5F1; --rose: #FF3E9D; --vert: #A8D8FF; --noir: #3D1E4F; --blanc: #FFFFFF; --gris-bord: #F5D6E5; --gris-texte: #8A5E7F; --gris-bg: #FFF0F7; --bg-page: #FFB3D1; --shadow-soft: 0 1px 3px rgba(61, 30, 79, 0.08); --shadow-card: 0 4px 16px rgba(255, 62, 157, 0.15); } /* Thème papier : papier kraft + encre noire + rouge */ body[data-theme="papier"] { --jaune: #F2E9D0; --rose: #C0392B; --vert: #7A8B5F; --noir: #2B2B2B; --blanc: #FDF9EF; --gris-bord: #D8CDB0; --gris-texte: #605848; --gris-bg: #F2E9D0; --bg-page: #E8DCBE; --shadow-soft: 0 1px 3px rgba(43, 43, 43, 0.08); --shadow-card: 0 4px 16px rgba(43, 43, 43, 0.15); } :root { /* alias pour compat inline anciennes pages */ --jaune-electrique: var(--jaune); --rose-fuchsia: var(--rose); --vert-lime: var(--vert); --bleu-roi: var(--noir); --creme: var(--blanc); --shadow-hero: none; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --bounce: cubic-bezier(.68, -0.55, .27, 1.55); --ease-soft: cubic-bezier(.2, .7, .3, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Quicksand', sans-serif; font-weight: 500; color: var(--noir); background: var(--bg-page); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .3s ease, color .3s ease; } h1, h2, h3, h4 { font-family: 'Lilita One', 'Arial Black', sans-serif; font-weight: 700; color: var(--noir); line-height: 1.1; margin: 0 0 .6em; letter-spacing: 0.3px; } h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); } h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); } a { color: var(--rose); text-decoration: none; font-weight: 600; } a:hover { color: var(--noir); } p { margin: 0 0 1em; color: var(--noir); } p small { color: var(--gris-texte); } /* ====== LAYOUT ====== */ .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ====== NAV ====== */ .tarto-nav { background: var(--bg-page); position: sticky; top: 0; z-index: 100; } .tarto-nav .container { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; gap: 20px; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo img { height: 60px; width: auto; display: block; transition: transform .3s var(--bounce); } .nav-logo:hover img { transform: rotate(-3deg) scale(1.04); } .nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav-links a { display: inline-block; padding: 10px 20px; color: var(--noir); border-radius: 999px; font-family: 'Anton', 'Impact', 'Arial Narrow', sans-serif; font-weight: 400; font-style: normal; font-size: 1.2rem; letter-spacing: 1.8px; text-transform: uppercase; white-space: nowrap; transition: all .18s var(--ease-soft); } .nav-links a:hover { background: var(--rose); color: var(--blanc); } .nav-links a.active { background: var(--noir); color: var(--jaune); } .nav-burger { display: none; background: transparent; border: none; width: 40px; height: 40px; cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 6px; } .nav-burger::before, .nav-burger::after, .nav-burger span { content: ''; display: block; width: 28px; height: 4px; background: var(--noir); border-radius: 2px; transition: transform .2s var(--ease-soft); } /* ====== BUTTONS ====== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Anton', 'Impact', sans-serif; font-weight: 400; font-size: 1.15rem; padding: 14px 30px; border: none; border-radius: 999px; background: var(--rose); color: var(--blanc); cursor: pointer; letter-spacing: 1.8px; text-transform: uppercase; transition: all .18s var(--ease-soft); text-decoration: none; } .btn:hover { background: var(--noir); color: var(--jaune); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-secondary { background: var(--jaune); color: var(--noir); } .btn-secondary:hover { background: var(--noir); color: var(--jaune); } .btn-ghost { background: transparent; color: var(--noir); border: 1.5px solid var(--gris-bord); padding: 10px 22px; font-size: 1rem; letter-spacing: 1.2px; } .btn-ghost:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); transform: none; } .btn-sm { padding: 8px 18px; font-size: .92rem; letter-spacing: 1.2px; } /* ====== CARDS ====== */ .card { background: var(--blanc); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 28px; transition: box-shadow .25s var(--ease-soft), transform .25s var(--ease-soft); } .card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); } .card-pop { box-shadow: var(--shadow-card); } .card-pop:hover { transform: translateY(-4px); } .card-jaune { background: var(--jaune); } .card-rose { background: var(--rose); color: var(--blanc); } .card-rose h1,.card-rose h2,.card-rose h3 { color: var(--blanc); } .card-vert { background: var(--vert); } .card-noir { background: var(--noir); color: var(--blanc); } .card-noir h1,.card-noir h2,.card-noir h3 { color: var(--jaune); } /* cards colorées flat */ .card-pop-jaune { background: var(--jaune); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); padding: 28px; } .card-pop-rose { background: var(--rose); color: var(--blanc); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); padding: 28px; } .card-pop-rose h1,.card-pop-rose h2,.card-pop-rose h3 { color: var(--blanc); } .card-pop-vert { background: var(--vert); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); padding: 28px; } .card-pop-noir { background: var(--noir); color: var(--blanc); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); padding: 28px; } .card-pop-noir h1,.card-pop-noir h2,.card-pop-noir h3 { color: var(--jaune); } .card-pop-bleu { background: var(--noir); color: var(--blanc); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); padding: 28px; } .card-pop-bleu h1,.card-pop-bleu h2,.card-pop-bleu h3 { color: var(--jaune); } .card-pop-rose p, .card-pop-noir p, .card-pop-bleu p { color: var(--blanc); } .card-pop-jaune:hover,.card-pop-rose:hover,.card-pop-vert:hover,.card-pop-noir:hover,.card-pop-bleu:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } /* ====== SECTIONS ====== */ section.pop { padding: 72px 0; position: relative; overflow-x: clip; } section.pop-jaune { background: var(--jaune); } section.pop-rose { background: var(--rose); color: var(--blanc); } section.pop-rose h1,section.pop-rose h2,section.pop-rose h3 { color: var(--blanc); } section.pop-vert { background: var(--vert); } section.pop-noir { background: var(--noir); color: var(--blanc); } section.pop-noir h1,section.pop-noir h2,section.pop-noir h3 { color: var(--jaune); } section.pop-blanc { background: var(--bg-page); } section.pop-gris { background: var(--bg-page); } section.pop-creme { background: var(--bg-page); } section.pop-bleu { background: var(--noir); color: var(--blanc); } section.pop-bleu h1,section.pop-bleu h2,section.pop-bleu h3 { color: var(--jaune); } /* ====== HERO ====== */ .hero { padding: 56px 0 72px; position: relative; overflow: hidden; text-align: center; background: var(--bg-page); } /* Décorations flottantes hero home */ .hero-deco { position: absolute; pointer-events: none; z-index: 0; opacity: .9; } .hero-deco svg { display: block; width: 100%; height: auto; } .hero .container { position: relative; z-index: 1; } .deco-float-1 { animation: deco-float 6s ease-in-out infinite; } .deco-float-2 { animation: deco-float 7s ease-in-out infinite 1s; } .deco-float-3 { animation: deco-float 8s ease-in-out infinite .5s; } .deco-float-4 { animation: deco-float 5.5s ease-in-out infinite 2s; } @keyframes deco-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 8deg)); } } .deco-spin-slow { animation: spin-slow 40s linear infinite; } /* Positions */ .deco-tl { top: 40px; left: 4%; width: 70px; --r: -8deg; } .deco-tr { top: 30px; right: 5%; width: 90px; --r: 12deg; } .deco-ml { top: 42%; left: 2%; width: 56px; --r: -4deg; } .deco-mr { top: 38%; right: 3%; width: 64px; --r: 6deg; } .deco-bl { bottom: 50px; left: 7%; width: 60px; --r: -12deg; } .deco-br { bottom: 30px; right: 8%; width: 80px; --r: 10deg; } .deco-wave { bottom: 14px; left: 50%; transform: translateX(-50%); width: min(90%, 600px); height: 28px; opacity: .7; } /* Emojis déco flottants */ .deco-emoji { position: absolute; pointer-events: none; z-index: 0; font-size: 2.4rem; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.15)); line-height: 1; } .deco-e-1 { top: 90px; left: 18%; --r: -12deg; animation: deco-float 6.5s ease-in-out infinite; } .deco-e-2 { top: 60px; right: 20%; --r: 10deg; animation: deco-float 7.2s ease-in-out infinite .6s; } .deco-e-3 { top: 34%; left: 10%; --r: -6deg; font-size: 2rem; animation: deco-float 5.8s ease-in-out infinite 1.4s; } .deco-e-4 { top: 48%; right: 12%; --r: 14deg; font-size: 2.2rem; animation: deco-float 6s ease-in-out infinite .8s; } .deco-e-5 { bottom: 90px; left: 22%; --r: 8deg; font-size: 2.1rem; animation: deco-float 7s ease-in-out infinite 1.8s; } .deco-e-6 { bottom: 80px; right: 22%; --r: -10deg; animation: deco-float 6.3s ease-in-out infinite 1.1s; } .deco-e-7 { top: 12%; left: 45%; --r: -4deg; font-size: 1.8rem; animation: deco-float 8s ease-in-out infinite 2.2s; } .deco-e-8 { bottom: 35%; right: 28%; --r: 6deg; font-size: 1.9rem; animation: deco-float 7.5s ease-in-out infinite 3s; } @media (max-width: 768px) { .deco-tl, .deco-tr { width: 50px; } .deco-ml, .deco-mr, .deco-bl { display: none; } .deco-br { width: 54px; bottom: 20px; right: 4%; } .deco-emoji { font-size: 1.7rem !important; } .deco-e-3, .deco-e-4, .deco-e-7, .deco-e-8 { display: none; } } .hero.pop-jaune { background: var(--jaune); } .hero.pop-rose { background: var(--rose); color: var(--blanc); } .hero.pop-rose h1,.hero.pop-rose h2 { color: var(--blanc); } .hero.pop-vert { background: var(--vert); } .hero .container { position: relative; z-index: 1; } .hero-logo { max-width: min(420px, 75vw); width: 100%; height: auto; display: block; margin: 24px auto; animation: float 4s ease-in-out infinite; cursor: pointer; transition: transform .3s var(--bounce); position: relative; z-index: 2; } .hero-logo:hover { transform: rotate(-3deg) scale(1.02); } .hero-logo.spin { animation: spin-once 1.2s var(--bounce); } /* Sunburst pop-art derrière le logo */ .hero-burst { position: relative; display: inline-block; margin: 24px auto; padding: 40px; } .hero-burst::before { content: ''; position: absolute; inset: -20px; background: /* Lignes de découpe entre les parts (fines, semi-transparentes) */ conic-gradient( from -22.5deg, transparent 0deg 44.4deg, rgba(0,0,0,.35) 44.4deg 45.6deg, transparent 45.6deg 89.4deg, rgba(0,0,0,.35) 89.4deg 90.6deg, transparent 90.6deg 134.4deg, rgba(0,0,0,.35) 134.4deg 135.6deg, transparent 135.6deg 179.4deg, rgba(0,0,0,.35) 179.4deg 180.6deg, transparent 180.6deg 224.4deg, rgba(0,0,0,.35) 224.4deg 225.6deg, transparent 225.6deg 269.4deg, rgba(0,0,0,.35) 269.4deg 270.6deg, transparent 270.6deg 314.4deg, rgba(0,0,0,.35) 314.4deg 315.6deg, transparent 315.6deg 360deg ), /* 8 parts de tarte, 1 manquante (315° → 360°) */ conic-gradient( from -22.5deg, var(--jaune) 0deg 45deg, var(--rose) 45deg 90deg, var(--vert) 90deg 135deg, var(--jaune) 135deg 180deg, var(--rose) 180deg 225deg, var(--vert) 225deg 270deg, var(--jaune) 270deg 315deg, transparent 315deg 360deg ); border-radius: 50%; z-index: 0; animation: spin-slow 90s linear infinite; filter: saturate(1.05); } .hero-burst::after { content: ''; position: absolute; inset: -20px; background: /* Halo central blanc léger */ radial-gradient(circle, transparent 38%, rgba(255,255,255,0.2) 38% 42%, transparent 42%), /* Halftone dots autour */ radial-gradient(circle at 15% 25%, var(--noir) 1.5px, transparent 2px), radial-gradient(circle at 85% 25%, var(--noir) 1.5px, transparent 2px), radial-gradient(circle at 12% 78%, var(--noir) 1.5px, transparent 2px), radial-gradient(circle at 88% 78%, var(--noir) 1.5px, transparent 2px); background-size: 100% 100%, 18px 18px, 18px 18px, 18px 18px, 18px 18px; border-radius: 50%; z-index: 1; pointer-events: none; opacity: .55; mix-blend-mode: multiply; } .hero-burst .hero-logo { max-width: min(320px, 60vw); margin: 0; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.25)); } @keyframes spin-slow { to { transform: rotate(360deg); } } @media (max-width: 640px) { .hero-burst { padding: 24px; } .hero-burst::before, .hero-burst::after { inset: -10px; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero-tagline { font-family: 'Anton', 'Impact', sans-serif; font-size: clamp(.95rem, 2vw, 1.1rem); font-weight: 400; color: var(--noir); margin-bottom: 20px; letter-spacing: 3px; text-transform: uppercase; opacity: .85; } .hero-subtitle { font-family: 'Quicksand', sans-serif; font-size: 1rem; color: var(--gris-texte); margin: 0 auto 20px; max-width: 560px; } /* ====== COUNTDOWN ====== */ .countdown { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto 8px; } .countdown-box { background: var(--blanc); border-radius: 16px; padding: 12px 18px; min-width: 80px; text-align: center; box-shadow: var(--shadow-soft); transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft); } .countdown-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .countdown-num { font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 700; line-height: 1; color: var(--noir); display: block; } .countdown-label { font-family: 'Quicksand', sans-serif; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gris-texte); margin-top: 4px; display: block; } .countdown.shake .countdown-box { animation: shake .4s infinite; } .countdown.jump .countdown-box { animation: jump .8s infinite; } @keyframes shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); } 50% { transform: translate(2px,-1px); } 75% { transform: translate(-1px,2px); } } @keyframes jump { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ====== FORM — moderne & épuré ====== */ form.tarto-form { display: flex; flex-direction: column; gap: 20px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .88rem; color: var(--noir); letter-spacing: .2px; } .field small { color: var(--gris-texte); font-weight: 500; font-size: .82rem; } input[type=text], input[type=number], input[type=password], textarea, select { font-family: 'Quicksand', sans-serif; font-size: 1rem; font-weight: 500; padding: 12px 16px; border: 1.5px solid var(--gris-bord); border-radius: var(--radius-sm); background: var(--blanc); color: var(--noir); transition: all .18s var(--ease-soft); width: 100%; } input::placeholder, textarea::placeholder { color: #B0B0B0; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--noir); box-shadow: 0 0 0 4px rgba(251, 35, 170, 0.12); } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Range slider moderne */ input[type=range] { -webkit-appearance: none; width: 100%; height: 6px; background: var(--gris-bord); border: none; border-radius: 999px; padding: 0; box-shadow: none; cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--rose); border: 2px solid var(--noir); border-radius: 50%; cursor: pointer; } input[type=range]::-moz-range-thumb { width: 22px; height: 22px; background: var(--rose); border: 2px solid var(--noir); border-radius: 50%; cursor: pointer; } /* Toggle pills */ .pill-group { display: inline-flex; border: 1.5px solid var(--gris-bord); border-radius: 999px; overflow: hidden; background: var(--blanc); padding: 3px; gap: 3px; } .pill-group input { display: none; } .pill-group label { padding: 8px 18px; cursor: pointer; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .9rem; color: var(--gris-texte); border-radius: 999px; transition: all .18s var(--ease-soft); } .pill-group input:checked + label { background: var(--noir); color: var(--blanc); } .pill-group label:hover { color: var(--noir); } /* Checkgrid */ .checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .checkgrid label { display: flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1.5px solid var(--gris-bord); border-radius: 999px; background: var(--blanc); cursor: pointer; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .9rem; color: var(--gris-texte); transition: all .18s var(--ease-soft); text-align: center; } .checkgrid input { display: none; } .checkgrid label:hover { border-color: var(--noir); color: var(--noir); } .checkgrid input:checked + *, .checkgrid label:has(input:checked) { background: var(--rose); border-color: var(--rose); color: var(--blanc); } /* ====== EMOJI PICKER ====== */ .emoji-picker { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; background: var(--gris-bg); padding: 10px; border-radius: var(--radius-md); border: 1.5px solid var(--gris-bord); } .emoji-choice { font-size: 1.4rem; background: var(--blanc); border: 1.5px solid transparent; border-radius: 10px; padding: 8px 0; cursor: pointer; transition: all .15s var(--ease-soft); } .emoji-choice:hover { background: var(--jaune); transform: scale(1.15); } .emoji-choice.selected { background: var(--rose); border-color: var(--noir); transform: scale(1.1); } @media (max-width: 560px) { .emoji-picker { grid-template-columns: repeat(5, 1fr); } } /* ====== BADGES ====== */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--gris-bg); color: var(--noir); font-family: 'Quicksand', sans-serif; font-size: .78rem; font-weight: 600; margin: 2px; } .badge-pop { background: var(--jaune); border: 1.5px solid var(--noir); } /* ====== GRIDS ====== */ .grid { display: grid; gap: 24px; align-items: start; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* ====== FOOTER ====== */ .tarto-footer { background: var(--noir); color: var(--blanc); padding: 40px 0; text-align: center; font-family: 'Quicksand', sans-serif; font-size: .95rem; line-height: 1.7; } .tarto-footer p, .tarto-footer strong, .tarto-footer small { color: var(--blanc); } .tarto-footer a { color: var(--jaune); font-weight: 700; } .tarto-footer a:hover { color: var(--vert); } .tarto-footer .footer-links { display: flex; justify-content: center; gap: 20px; margin-top: 16px; flex-wrap: wrap; } /* ====== ALERTS ====== */ .alert { padding: 14px 18px; border-radius: var(--radius-md); background: var(--gris-bg); border: 1px solid var(--gris-bord); font-family: 'Quicksand', sans-serif; font-weight: 500; margin-bottom: 20px; } .alert-error { background: #FFF0F5; border-color: var(--rose); color: var(--rose); } .alert-info { background: #FFFCE0; border-color: #D4DE00; } /* ====== UTILITIES ====== */ .text-center { text-align: center; } .mb-0 { margin-bottom: 0; } .mt-4 { margin-top: 32px; } .mb-4 { margin-bottom: 32px; } .rotate-n1 { display: inline-block; transform: rotate(-1deg); } .rotate-p1 { display: inline-block; transform: rotate(1deg); } .rotate-n2 { display: inline-block; transform: rotate(-2deg); } .rotate-p2 { display: inline-block; transform: rotate(2deg); } .counter-big { font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; line-height: 1; color: var(--rose); display: block; overflow-wrap: break-word; word-break: break-word; } /* Couleurs sûres dans les cards colorées — s'auto-adaptent au thème car var(--blanc) = couleur opposée au texte principal */ .card-pop-rose .counter-big { color: var(--blanc); } .card-pop-noir .counter-big { color: var(--blanc); } .card-pop-vert .counter-big, .card-pop-jaune .counter-big { color: var(--noir); } .card-pop-rose .stat-big { color: var(--blanc); } .card-pop-noir .stat-big { color: var(--blanc); } .stat-center { text-align: center; padding: 14px 4px; overflow-wrap: break-word; word-break: break-word; min-width: 0; } .stat-big { font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: clamp(1.6rem, 6vw, 2.8rem); line-height: 1.05; color: var(--rose); word-break: break-word; overflow-wrap: break-word; hyphens: auto; margin-bottom: 6px; } /* Word cloud responsive : pas d'overflow */ #wordCloud { overflow-wrap: break-word; word-break: break-word; } #wordCloud span { max-width: 100%; } /* Cards : max-width safe */ .card { max-width: 100%; overflow-wrap: break-word; } .card canvas { max-width: 100%; } /* ====== BULLE BD (pour liste seulement) ====== */ .bulle { position: relative; background: var(--gris-bg); border-radius: 18px; padding: 12px 16px; font-family: 'Quicksand', sans-serif; font-style: italic; font-weight: 500; font-size: .95rem; color: var(--noir); } /* ====== POULPY INTERACTIONS ====== */ .hero-logo.wobble { animation: wobble .45s var(--bounce); } @keyframes wobble { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(-8deg) scale(1.06); } 50% { transform: rotate(6deg) scale(1.04); } 75% { transform: rotate(-3deg) scale(1.02); } 100% { transform: rotate(0) scale(1); } } .poulpy-flash { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.3); background: var(--jaune); border-radius: 22px; padding: 18px 30px; font-family: 'Anton', 'Impact', sans-serif; font-size: clamp(1.2rem, 2.8vw, 1.8rem); letter-spacing: 1.5px; text-transform: uppercase; box-shadow: var(--shadow-card); z-index: 9999; pointer-events: none; animation: flash-pop 1.2s var(--bounce) forwards; max-width: 80vw; text-align: center; } @keyframes flash-pop { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1) rotate(3deg); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; } 85% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(.8) rotate(0); opacity: 0; } } /* ====== LIST PARTICIPANTS ====== */ .list-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; } .list-search { flex: 1; min-width: 240px; padding: 14px 22px; border: none; border-radius: 999px; background: var(--blanc); font-family: 'Quicksand', sans-serif; font-size: 1rem; box-shadow: var(--shadow-soft); } .list-search:focus { outline: none; box-shadow: 0 0 0 3px var(--rose); } .list-sort { display: flex; gap: 6px; flex-wrap: wrap; } .list-sort button { padding: 10px 16px; border: none; border-radius: 999px; background: var(--blanc); font-family: 'Bangers', 'Lilita One', 'Arial Black', sans-serif; font-size: 1rem; letter-spacing: 1px; cursor: pointer; color: var(--noir); box-shadow: var(--shadow-soft); transition: all .15s; } .list-sort button:hover { transform: translateY(-1px); } .list-sort button.active { background: var(--noir); color: var(--jaune); } .list-count { font-family: 'Bangers', 'Lilita One', 'Arial Black', sans-serif; font-size: 1.1rem; letter-spacing: 1.2px; color: var(--noir); margin-bottom: 14px; } .participant-rows { display: flex; flex-direction: column; gap: 10px; font-family: 'Inter', sans-serif; } .participant-row { display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: var(--blanc); border-radius: 18px; text-decoration: none; color: var(--noir); transition: transform .15s, box-shadow .15s; box-shadow: var(--shadow-soft); font-family: 'Inter', sans-serif; } .participant-row:hover { transform: translateX(6px); box-shadow: var(--shadow-card); color: var(--noir); } .participant-row .p-emoji { font-size: 2.4rem; flex-shrink: 0; line-height: 1; } .participant-row .p-name { flex: 1.3; min-width: 180px; display: flex; flex-direction: column; gap: 3px; } .participant-row .p-name strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.15; color: var(--noir); } .participant-row .p-name .p-nomfam { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .85rem; color: var(--gris-texte); letter-spacing: .8px; margin-left: 6px; } .participant-row .p-name .p-humeur { color: var(--gris-texte); font-style: italic; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; } .participant-row .p-tartes { flex: 2; min-width: 0; font-size: .95rem; color: var(--noir); line-height: 1.45; } .participant-row .p-tartes .p-tarte-line { display: flex; gap: 6px; align-items: baseline; } .participant-row .p-tartes .p-tarte-nom { font-weight: 600; color: var(--noir); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .participant-row .p-tartes .p-tarte-meta { color: var(--gris-texte); font-size: .85rem; flex-shrink: 0; } .participant-row .p-tartes .p-nothing { color: var(--gris-texte); font-style: italic; font-size: .88rem; } .participant-row .p-stats { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--noir); white-space: nowrap; flex-shrink: 0; min-width: 110px; align-items: flex-end; } .participant-row .p-stats .p-stat-row { display: flex; gap: 6px; align-items: baseline; } .participant-row .p-stats strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--rose); } .participant-row .p-stats .p-stat-lbl { color: var(--gris-texte); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; } .participant-row .p-badges { display: flex; gap: 3px; font-size: 1.2rem; flex-shrink: 0; } .participant-row .p-edit { font-size: 1.3rem; color: var(--gris-texte); flex-shrink: 0; opacity: .5; transition: opacity .15s, transform .15s; } .participant-row:hover .p-edit { opacity: 1; transform: translateX(3px); } @media (max-width: 900px) { .participant-row { flex-wrap: wrap; gap: 12px; padding: 18px; } .participant-row .p-name { flex: 1; min-width: 0; } .participant-row .p-tartes { width: 100%; padding-left: 56px; } .participant-row .p-stats { flex-direction: row; align-items: center; gap: 14px; width: 100%; padding-left: 56px; min-width: 0; justify-content: flex-start; white-space: normal; } .participant-row .p-stats .p-stat-row { align-items: center; } .participant-row .p-name .p-humeur { max-width: 240px; } .participant-row .p-edit { display: none; } } @media (max-width: 640px) { .participant-row { padding: 14px 16px; gap: 10px; } .participant-row .p-emoji { font-size: 2rem; } .participant-row .p-name strong { font-size: 1.05rem; } .participant-row .p-name .p-nomfam { display: block; margin-left: 0; margin-top: 2px; font-size: .78rem; } .participant-row .p-name .p-humeur { white-space: normal; max-width: none; font-size: .82rem; } .participant-row .p-tartes { padding-left: 0; margin-top: 4px; font-size: .9rem; } .participant-row .p-tartes .p-tarte-line { flex-wrap: wrap; } .participant-row .p-tartes .p-tarte-nom { white-space: normal; } .participant-row .p-stats { padding-left: 0; flex-wrap: wrap; gap: 10px; } .participant-row .p-stats strong { font-size: 1rem; } .participant-row .p-stats .p-stat-lbl { font-size: .7rem; } .participant-row .p-badges { font-size: 1rem; } .list-toolbar { flex-direction: column; align-items: stretch; } .list-sort { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .list-sort button { white-space: nowrap; flex-shrink: 0; } } /* ====== TABLES ====== */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--blanc); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .tarto-table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; font-size: .92rem; } .tarto-table thead th { background: var(--noir); color: var(--jaune); text-align: left; padding: 12px 14px; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; } .tarto-table thead th.num { text-align: right; } .tarto-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--gris-bord); vertical-align: top; color: var(--noir); background: var(--blanc); } .tarto-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } .tarto-table tbody tr:nth-child(even) td { background: var(--gris-bg); } .tarto-table tbody tr:hover td { background: #FFF9C4; } .tarto-table tbody td strong { color: var(--noir); } .tarto-table tfoot td { padding: 12px 14px; background: var(--jaune); color: var(--noir); font-weight: 700; border-top: 2px solid var(--noir); } .tarto-table tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; } .tarto-table small { color: var(--gris-texte); font-size: .85em; } /* Table sur fond coloré (boissons sur section rose) */ .tarto-table-dark { /* le wrap garde son fond blanc de toute façon */ } @media (max-width: 640px) { .tarto-table { font-size: .85rem; } .tarto-table thead th, .tarto-table tbody td, .tarto-table tfoot td { padding: 8px 10px; } } /* ====== POLAROID WALL ====== */ .polaroid-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; padding: 10px 0; } .polaroid { background: var(--blanc); padding: 14px 14px 22px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); transition: transform .22s var(--ease-soft), box-shadow .22s var(--ease-soft); display: flex; flex-direction: column; gap: 8px; min-height: 160px; } .polaroid:hover { transform: rotate(0) scale(1.04) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 2; } .polaroid-emoji { font-size: 1.8rem; line-height: 1; } .polaroid-text { margin: 0; font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: .95rem; line-height: 1.35; word-wrap: break-word; } .polaroid-auteur { margin-top: auto; font-family: 'Lilita One', 'Arial Black', sans-serif; font-weight: 600; font-size: .85rem; opacity: .8; } /* ====== MESSAGE FORM EMOJI/COLOR PICK ====== */ .msg-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .pick-inline { display: flex; flex-wrap: wrap; gap: 4px; } .pick-inline input { display: none; } .pick-inline label { cursor: pointer; padding: 4px 8px; border-radius: 8px; font-size: 1.2rem; transition: all .15s; } .pick-inline input:checked + label, .pick-inline label:has(input:checked) { background: var(--noir); } .pick-color span { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; vertical-align: middle; } .pick-color input:checked + span, .pick-color label:has(input:checked) span { border-color: var(--noir); transform: scale(1.2); } /* ====== GENERATOR BOX ====== */ .gen-tarte-out { font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: clamp(1.1rem, 2.4vw, 1.5rem); padding: 18px 24px; background: var(--blanc); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); min-height: 60px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--noir); transition: transform .2s; } .gen-tarte-out.pop-in { animation: pop-in .35s var(--bounce); } @keyframes pop-in { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } } /* ====== HIDDEN CHERRIES ====== */ .hidden-cherry { background: transparent; border: none; cursor: pointer; z-index: 50; animation: cherry-pulse 2.8s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); transition: transform .2s var(--bounce); padding: 2px 4px; line-height: 1; } .hidden-cherry:hover { transform: scale(1.4) rotate(-10deg); } .hidden-cherry.pop { animation: cherry-found .5s forwards; } @keyframes cherry-pulse { 0%,100% { opacity: .75; } 50% { opacity: 1; filter: drop-shadow(0 0 6px var(--rose)); } } @keyframes cherry-found { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(2); opacity: 1; } 100% { transform: scale(0) translateY(-40px); opacity: 0; } } .cherry-counter { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--blanc); border-radius: 999px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .85rem; color: var(--noir); border: 1.5px solid var(--gris-bord); text-decoration: none; transition: all .15s; } .cherry-counter.complete { background: var(--rose); color: var(--blanc); border-color: var(--rose); } .cherry-counter:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); color: var(--noir); } .cherry-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--noir); color: var(--blanc); padding: 14px 22px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); z-index: 9998; max-width: min(440px, 92vw); font-family: 'Quicksand', sans-serif; animation: cherry-toast-in .3s var(--bounce) forwards; } .cherry-toast.hide { animation: cherry-toast-out .3s forwards; } .cherry-toast strong { font-family: 'Lilita One', 'Arial Black', sans-serif; display: block; margin-bottom: 4px; } @keyframes cherry-toast-in { from { transform: translateX(-50%) translateY(60px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } @keyframes cherry-toast-out { to { transform: translateX(-50%) translateY(40px); opacity: 0; } } /* ====== LEAFLET PIN ====== */ .poulpy-pin { background: transparent; border: none; } .poulpy-pin img { display: block; } /* ====== MOLKKY GAME ====== */ .molkky-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; } #molkkyCanvas { background: linear-gradient(180deg, #DFF5D0 0%, #95E871 100%); border-radius: var(--radius-md); cursor: crosshair; width: 100%; max-width: 480px; height: auto; aspect-ratio: 480 / 620; touch-action: none; display: block; } .molkky-scoreboard { flex-wrap: wrap; justify-content: center; } .molkky-scoreboard { display: flex; gap: 20px; font-family: 'Anton', 'Impact', sans-serif; letter-spacing: 1.2px; background: var(--noir); color: var(--blanc); padding: 12px 20px; border-radius: var(--radius-md); } .molkky-scoreboard strong { color: var(--jaune); font-size: 1.3rem; } /* ====== RESPONSIVE ====== */ @media (max-width: 768px) { .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--jaune); flex-direction: column; padding: 12px; border-bottom: 1px solid var(--gris-bord); box-shadow: var(--shadow-soft); } .nav-links.open { display: flex; } .nav-burger { display: inline-flex; align-items: center; justify-content: center; } .hero { padding: 24px 0 48px; } section.pop { padding: 48px 0; } .container { padding: 0 16px; } .card { padding: 20px 18px; } .card-pop-jaune, .card-pop-rose, .card-pop-vert, .card-pop-noir, .card-pop-bleu { padding: 20px 18px; } .grid { gap: 16px; } .stat-big { font-size: clamp(1.4rem, 7vw, 2rem); } } /* ====== GATE PAGE ====== */ .gate-body { overflow: hidden; } .gate-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; background: var(--bg-page); } .gate-card { background: var(--blanc); border-radius: var(--radius-lg); padding: 36px 30px 30px; max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow-card); } .gate-logo { max-width: 200px; width: 60%; height: auto; display: block; margin: 0 auto 18px; animation: float 4s ease-in-out infinite; } .gate-subtitle { font-family: 'Anton', 'Impact', sans-serif; letter-spacing: 2.5px; text-transform: uppercase; font-size: .8rem; color: var(--gris-texte); margin-bottom: 28px; } .gate-form { display: flex; flex-direction: column; gap: 12px; } .gate-form input[type=password] { font-family: 'Quicksand', sans-serif; font-size: 1.1rem; padding: 14px 18px; border: 1.5px solid var(--gris-bord); border-radius: 999px; background: var(--gris-bg); color: var(--noir); text-align: center; width: 100%; } .gate-form input[type=password]:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(251, 35, 170, 0.12); } .gate-form .btn { width: 100%; } .gate-hint { margin-top: 18px; font-size: .82rem; color: var(--gris-texte); margin-bottom: 0; } /* ====== THEME SWITCHER ====== */ .theme-switcher { position: fixed; bottom: 20px; right: 20px; z-index: 999; } .theme-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--noir); color: var(--jaune); border: none; font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; transition: transform .2s var(--bounce); } .theme-btn:hover { transform: scale(1.1) rotate(20deg); } .theme-menu { position: absolute; bottom: 60px; right: 0; background: var(--blanc); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 10px; display: none; min-width: 200px; max-height: 70vh; overflow-y: auto; } .theme-menu::-webkit-scrollbar { width: 6px; } .theme-menu::-webkit-scrollbar-thumb { background: var(--gris-bord); border-radius: 3px; } .theme-menu.open { display: block; } .theme-menu .theme-title { font-family: 'Anton', 'Impact', sans-serif; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris-texte); padding: 6px 10px 10px; } .theme-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: transparent; color: var(--noir); text-align: left; cursor: pointer; border-radius: 8px; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .9rem; transition: background .15s; } .theme-menu button:hover { background: var(--gris-bg); } .theme-menu button.active { background: var(--jaune); color: var(--noir); } .theme-swatch { display: inline-flex; gap: 2px; flex-shrink: 0; } .theme-swatch span { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); } /* ====== EASTER EGGS ====== */ .tart-rain { position: fixed; top: -50px; font-size: 2.6rem; pointer-events: none; animation: fall linear forwards; z-index: 9999; } @keyframes fall { to { transform: translateY(110vh) rotate(720deg); } } .confetti { position: fixed; width: 10px; height: 10px; pointer-events: none; animation: confetti-fall 2.2s ease-out forwards; z-index: 9999; border-radius: 2px; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* ====== LISTE PARTICIPANTS — VERSION COMPACTE + POPUP DÉTAIL ====== */ .participant-row .p-counters { flex: 2; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: .95rem; color: var(--noir); } .participant-row .p-counters .p-cnt-item { white-space: nowrap; font-weight: 600; } .participant-row .p-counters .p-cnt-sep { color: var(--gris-texte); opacity: .6; } .participant-row .p-counters .p-nothing { color: var(--gris-texte); font-style: italic; font-size: .88rem; } .participant-row .p-detail-btn { background: var(--bg-page); border: 1px solid var(--gris-bord); border-radius: 999px; padding: 6px 14px; font-size: .85rem; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--noir); cursor: pointer; user-select: none; transition: background .15s, transform .15s, border-color .15s; flex-shrink: 0; } .participant-row .p-detail-btn:hover, .participant-row .p-detail-btn:focus-visible { background: var(--jaune); border-color: var(--noir); transform: translateY(-1px); outline: none; } @media (max-width: 900px) { .participant-row .p-counters { width: 100%; padding-left: 56px; } } @media (max-width: 600px) { .participant-row .p-counters { padding-left: 0; } .participant-row .p-detail-btn { padding: 5px 10px; font-size: .78rem; } } /* ---- Modal détail participant ---- */ .tarto-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; } .tarto-modal[hidden] { display: none; } .tarto-modal .modal-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: tartoFadeIn .2s var(--ease-soft, ease); cursor: pointer; } .tarto-modal .modal-card { position: relative; background: var(--blanc); color: var(--noir); border-radius: var(--radius-lg); max-width: 600px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); animation: tartoSlideUp .25s var(--ease-soft, ease); } .tarto-modal .modal-close { position: absolute; top: 12px; right: 14px; background: var(--bg-page); border: 1px solid var(--gris-bord); width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; color: var(--noir); line-height: 1; z-index: 2; transition: background .15s, transform .15s; } .tarto-modal .modal-close:hover { background: var(--rose); color: var(--blanc); transform: rotate(90deg); } .tarto-modal .modal-header { padding: 28px 60px 18px 28px; border-bottom: 1px solid var(--gris-bord); } .tarto-modal .modal-header-name { display: flex; gap: 14px; align-items: center; } .tarto-modal .modal-emoji { font-size: 2.4rem; line-height: 1; } .tarto-modal .modal-header h2 { margin: 0; font-family: 'Lilita One', sans-serif; font-size: 1.6rem; line-height: 1.2; color: var(--noir); } .tarto-modal .modal-nomfam { font-weight: normal; opacity: .7; font-size: .85em; margin-left: 4px; } .tarto-modal .modal-lock { font-size: .7em; opacity: .65; } .tarto-modal .modal-humeur { margin: 12px 0 0; font-style: italic; color: var(--gris-texte); font-size: 1rem; } .tarto-modal .modal-section { padding: 20px 28px; border-bottom: 1px solid var(--gris-bord); } .tarto-modal .modal-section h3 { margin: 0 0 14px; font-family: 'DynaPuff', cursive; font-size: 1.15rem; color: var(--noir); } .tarto-modal .modal-tarte { padding: 10px 0; } .tarto-modal .modal-tarte + .modal-tarte { border-top: 1px dashed var(--gris-bord); } .tarto-modal .modal-tarte-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; } .tarto-modal .modal-tarte-type { font-size: 1.1rem; } .tarto-modal .modal-tarte-nom { font-size: 1rem; color: var(--noir); } .tarto-modal .modal-tarte-meta { color: var(--gris-texte); font-size: .9rem; } .tarto-modal .modal-tarte-allergenes { display: inline-block; margin-top: 6px; padding: 2px 10px; background: var(--bg-page); border: 1px solid var(--gris-bord); border-radius: 999px; font-size: .78rem; color: var(--gris-texte); } .tarto-modal .modal-tarte-note { font-style: italic; color: var(--gris-texte); margin-top: 6px; font-size: .92rem; padding-left: 8px; border-left: 3px solid var(--jaune); } .tarto-modal .modal-boisson { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 8px 0; } .tarto-modal .modal-boisson + .modal-boisson { border-top: 1px dashed var(--gris-bord); } .tarto-modal .modal-boisson-type { font-size: 1.1rem; } .tarto-modal .modal-boisson-nom { font-size: 1rem; color: var(--noir); } .tarto-modal .modal-boisson-meta { color: var(--gris-texte); font-size: .9rem; } .tarto-modal .modal-jeux { display: flex; flex-wrap: wrap; gap: 6px; } .tarto-modal .modal-jeu-chip { background: var(--jaune); color: var(--noir); border-radius: 999px; padding: 4px 14px; font-size: .88rem; font-weight: 600; } .tarto-modal .modal-footer { padding: 20px 28px 24px; text-align: center; } @keyframes tartoFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tartoSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .tarto-modal { padding: 10px; } .tarto-modal .modal-card { max-height: 92vh; } .tarto-modal .modal-header { padding: 22px 54px 14px 18px; } .tarto-modal .modal-header h2 { font-size: 1.3rem; } .tarto-modal .modal-emoji { font-size: 2rem; } .tarto-modal .modal-section { padding: 16px 18px; } .tarto-modal .modal-footer { padding: 16px 18px 20px; } } /* ====== MÖLKKY — phrase prix + classement ====== */ .molkky-prize { display: inline-block; margin-top: 14px; padding: 10px 18px; background: var(--jaune); color: var(--noir); border: 2px solid var(--noir); border-radius: 999px; font-family: 'DynaPuff', cursive; font-size: 1rem; line-height: 1.4; box-shadow: 4px 4px 0 var(--noir); } .molkky-classement { max-width: 480px; margin: 24px auto 0; max-height: 360px; overflow-y: auto; } .mk-score-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: baseline; padding: 8px 4px; border-bottom: 1px dashed var(--gris-bord); font-size: .95rem; } .mk-score-row:last-child { border-bottom: none; } .mk-score-row:first-child { background: linear-gradient(90deg, rgba(230,249,2,.25), transparent); } .mk-rank { font-weight: 700; text-align: center; font-size: 1.1rem; } .mk-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-lancers { color: var(--noir); white-space: nowrap; } .mk-lancers strong { color: var(--rose); font-size: 1.05rem; } .mk-date { color: var(--gris-texte); font-size: .8rem; white-space: nowrap; } @media (max-width: 480px) { .mk-score-row { grid-template-columns: 32px 1fr auto; } .mk-date { display: none; } .molkky-prize { font-size: .9rem; padding: 8px 14px; } } /* ====== CHALLENGES — Liste verticale (1 jeu par ligne) ====== */ .challenge-list { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; } .challenge-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 16px; border: 3px solid var(--noir); text-decoration: none; color: var(--noir); background: var(--blanc); box-shadow: 4px 4px 0 var(--noir); transition: transform .15s var(--ease-soft, ease), box-shadow .15s var(--ease-soft, ease); } .challenge-row:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--noir); } .challenge-row .ch-emoji { font-size: 2.6rem; line-height: 1; text-align: center; } .challenge-row .ch-body h3 { margin: 0 0 4px; font-family: 'Lilita One', sans-serif; font-size: 1.25rem; line-height: 1.1; } .challenge-row .ch-body p { margin: 0; font-size: .95rem; color: var(--gris-texte); } .challenge-row .ch-cta { font-family: 'DynaPuff', cursive; font-weight: 600; background: var(--noir); color: var(--jaune); padding: 8px 16px; border-radius: 999px; white-space: nowrap; font-size: .9rem; } .challenge-row .ch-badge { display: inline-block; background: var(--rose); color: var(--blanc); font-size: .65rem; font-family: 'Inter', sans-serif; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 1px; vertical-align: middle; margin-left: 4px; } .challenge-row .ch-badge-soft { background: var(--gris-bord); color: var(--gris-texte); } /* Variantes de couleur par challenge */ .challenge-jaune { background: var(--jaune); } .challenge-rose { background: var(--rose); color: var(--blanc); } .challenge-rose .ch-body h3 { color: var(--blanc); } .challenge-rose .ch-body p { color: rgba(255,255,255,.85); } .challenge-rose .ch-cta { background: var(--blanc); color: var(--rose); } .challenge-vert { background: var(--vert); } .challenge-bleu { background: linear-gradient(135deg, #88D8FF 0%, #4DA9F9 100%); color: var(--noir); } .challenge-bleu .ch-body p { color: var(--noir); opacity: .75; } .challenge-noir { background: var(--noir); color: var(--blanc); box-shadow: 4px 4px 0 var(--rose); } .challenge-noir .ch-body h3 { color: var(--jaune); } .challenge-noir .ch-body p { color: rgba(255,255,255,.75); } .challenge-noir .ch-cta { background: var(--jaune); color: var(--noir); } @media (max-width: 600px) { .challenge-row { grid-template-columns: 50px 1fr; gap: 12px; padding: 14px 16px; } .challenge-row .ch-emoji { font-size: 2rem; } .challenge-row .ch-cta { grid-column: 1 / -1; justify-self: end; padding: 6px 12px; font-size: .85rem; } .challenge-row .ch-body h3 { font-size: 1.1rem; } } /* ====== SECRETS — Liste verticale simple ====== */ .secret-list { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin: 0 auto; } .secret-row { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 14px 18px; background: rgba(0,0,0,.35); border-radius: 14px; color: var(--blanc); } .secret-row .sec-emoji { font-size: 2rem; text-align: center; } .secret-row h3 { margin: 0 0 2px; color: var(--jaune); font-family: 'Lilita One', sans-serif; font-size: 1.05rem; } .secret-row p { margin: 0; color: rgba(255,255,255,.9); font-size: .92rem; } .secret-row code { background: rgba(255,255,255,.18); padding: 1px 6px; border-radius: 4px; font-size: .88em; } /* Anciennes classes jeu-card maintenues pour compat éventuelle */ .jeux-grid .jeu-card { display: flex; flex-direction: column; text-decoration: none; position: relative; overflow: hidden; transition: transform .2s var(--ease-soft, ease), box-shadow .2s var(--ease-soft, ease); } .jeux-grid .jeu-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.18); } .jeux-grid .jeu-emoji { font-size: 3rem; line-height: 1; margin-bottom: 10px; } .jeux-grid .jeu-card h2 { margin-top: 0; } .jeux-grid .jeu-card p { flex: 1; } .jeux-grid .jeu-cta { display: inline-block; margin-top: 12px; font-family: 'DynaPuff', cursive; font-weight: 600; color: var(--noir); align-self: flex-start; padding: 6px 14px; border: 2px solid currentColor; border-radius: 999px; background: rgba(255,255,255,.6); } .jeux-grid .card-pop-rose .jeu-cta, .jeux-grid .card-pop-noir .jeu-cta { color: var(--jaune); background: rgba(0,0,0,.25); border-color: var(--jaune); } .champion-board { padding: 0; overflow: hidden; } .champion-row { display: grid; grid-template-columns: 44px 1fr 44px 44px 44px 110px; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px dashed var(--gris-bord); font-size: .95rem; } .champion-row:last-child { border-bottom: none; } .champion-row.is-leader { background: linear-gradient(90deg, rgba(230,249,2,.45), transparent); } .champion-head { background: var(--noir); color: var(--jaune); font-family: 'Lilita One', sans-serif; text-transform: uppercase; font-size: .85rem; letter-spacing: 1px; } .champion-head .champ-rank, .champion-head .champ-name, .champion-head .champ-game, .champion-head .champ-total { color: var(--jaune); } .champ-rank { text-align: center; font-weight: 700; font-size: 1.15rem; } .champ-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .champ-game { text-align: center; font-weight: 600; color: var(--gris-texte); } .champion-row:not(.champion-head) .champ-game:not([style*="·"]) { color: var(--noir); } .champ-total { text-align: right; } .champ-total strong { color: var(--rose); font-size: 1.1rem; } .secret-card h3 { margin-top: 0; color: var(--jaune); } .secret-card { background: rgba(0,0,0,.35); border-radius: var(--radius-lg); color: var(--blanc); padding: 22px; } .secret-card p { color: rgba(255,255,255,.92); margin-bottom: 0; } .secret-card code { background: rgba(255,255,255,.15); padding: 2px 8px; border-radius: 4px; font-size: .9em; } @media (max-width: 700px) { .champion-row { grid-template-columns: 38px 1fr 32px 32px 32px 80px; gap: 6px; font-size: .85rem; padding: 10px 12px; } .champion-head { font-size: .7rem; letter-spacing: .5px; } } /* ====== SNAKE ====== */ .snake-canvas { display: block; margin: 0 auto; border: 4px solid var(--noir); border-radius: var(--radius-lg); box-shadow: 0 0 30px rgba(117, 249, 77, .25); background: #0d1f12; max-width: 100%; height: auto; touch-action: none; } /* ====== WHACK-A-TARTE ====== */ .whack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 480px; margin: 16px auto; aspect-ratio: 1; } .whack-grid.shake { animation: whackShake .35s; } @keyframes whackShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } } .whack-grid .hole { background: radial-gradient(circle at center, var(--noir) 0%, #2a2a2a 50%, var(--gris-bord) 80%); border: 3px solid var(--noir); border-radius: 50%; cursor: pointer; position: relative; overflow: hidden; transition: transform .12s; aspect-ratio: 1; padding: 0; } .whack-grid .hole:hover { transform: scale(1.02); } .whack-grid .hole-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(2rem, 9vw, 3.6rem); opacity: 0; transform: translateY(50%) scale(.5); transition: opacity .15s, transform .15s var(--ease-soft, ease); pointer-events: none; } .whack-grid .hole.pop .hole-emoji { opacity: 1; transform: translateY(0) scale(1); } .whack-grid .hole.whacked .hole-emoji { transform: translateY(0) scale(1.4) rotate(20deg); opacity: .7; } /* ====== SLOT MACHINE ====== */ .slot-wrap { display: flex; justify-content: center; padding: 16px; } .slot-cabinet { background: linear-gradient(180deg, #B8761B 0%, #7A4E10 100%); border: 6px solid #3F2700; border-radius: 20px; padding: 24px; box-shadow: 0 12px 40px rgba(0,0,0,.4), inset 0 0 30px rgba(0,0,0,.3); max-width: 460px; width: 100%; text-align: center; transition: box-shadow .3s; } .slot-cabinet.jackpot-flash { animation: slotFlash .4s ease-in-out 3; box-shadow: 0 0 60px var(--jaune); } @keyframes slotFlash { 0%,100% { background: linear-gradient(180deg, #B8761B 0%, #7A4E10 100%); } 50% { background: linear-gradient(180deg, var(--jaune) 0%, var(--rose) 100%); } } .slot-display { display: flex; gap: 8px; justify-content: center; padding: 16px; background: #1a1a1a; border-radius: 12px; margin-bottom: 16px; box-shadow: inset 0 0 20px rgba(0,0,0,.6); } .slot-reel { width: 80px; height: 80px; overflow: hidden; background: var(--blanc); border-radius: 8px; position: relative; border: 3px solid var(--noir); } .slot-strip { display: flex; flex-direction: column; will-change: transform; } .slot-symbol { height: 80px; width: 80px; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; flex-shrink: 0; } .btn-slot { background: var(--rose); color: var(--blanc); border: 3px solid var(--noir); font-size: 1.1rem; padding: 12px 28px; } .btn-slot:disabled { opacity: .5; cursor: not-allowed; } .slot-info { display: flex; justify-content: space-around; gap: 10px; color: var(--jaune); background: rgba(0,0,0,.4); padding: 10px; border-radius: 8px; margin: 16px 0; font-size: .9rem; flex-wrap: wrap; } .slot-info strong { color: var(--blanc); } .slot-message { font-family: 'DynaPuff', cursive; padding: 10px 18px; background: var(--blanc); color: var(--noir); border-radius: 999px; min-height: 1.5rem; } @media (max-width: 480px) { .slot-reel { width: 64px; height: 64px; } .slot-symbol { width: 64px; height: 64px; font-size: 2rem; } .slot-cabinet { padding: 16px; } } /* ====== MOTS MAGIQUES — rainbow flash ====== */ @keyframes rainbowSweep { 0% { filter: hue-rotate(0deg) saturate(1.3); } 100% { filter: hue-rotate(360deg) saturate(1.3); } } body.rainbow-flash { animation: rainbowSweep 1.8s linear; } /* ====== PRONOS MÉTÉO ====== */ .prono-icones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .prono-icones input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .prono-icones label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px; background: var(--bg-page); border: 2px solid var(--gris-bord); border-radius: var(--radius-lg); cursor: pointer; font-size: .8rem; color: var(--gris-texte); transition: all .15s; text-align: center; } .prono-icones label span { font-size: 1.8rem; line-height: 1; margin-bottom: 4px; } .prono-icones label:hover { border-color: var(--noir); } .prono-icones input[type="radio"]:checked + label { background: var(--jaune); border-color: var(--noir); color: var(--noir); font-weight: 600; transform: translateY(-2px); box-shadow: 0 6px 0 var(--noir); } .prono-list { max-height: 320px; overflow-y: auto; } .prono-row { display: grid; grid-template-columns: 1fr 40px 60px; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed var(--gris-bord); font-size: .95rem; } .prono-row:last-child { border-bottom: none; } .prono-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .prono-icone { text-align: center; font-size: 1.4rem; } .prono-temp { text-align: right; color: var(--noir); } .prono-temp strong { color: var(--rose); font-size: 1.05rem; } .prono-rule { display: flex; align-items: center; gap: 18px; max-width: 720px; margin: 16px auto 0; padding: 18px 22px; background: var(--blanc); border: 3px solid var(--noir); border-radius: 18px; box-shadow: 6px 6px 0 var(--noir); text-align: left; line-height: 1.45; } .prono-rule-icon { font-size: 2.6rem; flex-shrink: 0; } .prono-rule-text { color: var(--noir); font-size: 1rem; } .prono-rule-text small { color: var(--gris-texte); font-size: .85rem; display: block; margin-top: 6px; } @media (max-width: 600px) { .prono-rule { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; } .prono-rule-icon { font-size: 2rem; } } .prono-deadline { display: flex; align-items: center; gap: 16px; max-width: 720px; margin: 18px auto 0; padding: 14px 22px; background: var(--noir); color: var(--blanc); border-radius: 18px; box-shadow: 4px 4px 0 var(--rose); } .prono-deadline-icon { font-size: 2rem; flex-shrink: 0; } .prono-deadline strong { color: var(--jaune); } .prono-deadline small { color: rgba(255,255,255,.75); display: block; margin-top: 4px; } .prono-countdown { display: flex; gap: 14px; margin-top: 6px; font-family: 'Lilita One', sans-serif; } .prono-countdown span { display: flex; align-items: baseline; gap: 4px; color: rgba(255,255,255,.85); font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; } .prono-countdown strong { color: var(--jaune); font-size: 1.6rem; font-family: 'Lilita One', sans-serif; } .prono-deadline.prono-deadline-urgent { background: var(--rose); box-shadow: 4px 4px 0 var(--noir); animation: pronoUrgentPulse 1.2s ease-in-out infinite; } .prono-deadline.prono-deadline-urgent strong { color: var(--jaune); } @keyframes pronoUrgentPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .prono-deadline.prono-deadline-closed { background: var(--gris-bord); color: var(--noir); box-shadow: 4px 4px 0 var(--noir); } .prono-deadline.prono-deadline-closed strong { color: var(--noir); } .prono-deadline.prono-deadline-closed small { color: var(--gris-texte); } @media (max-width: 600px) { .prono-deadline { flex-direction: column; align-items: flex-start; padding: 14px 18px; } .prono-countdown { gap: 10px; flex-wrap: wrap; } .prono-countdown strong { font-size: 1.3rem; } }