/* ============================================================ * style.css — Palettes, animations & petites douceurs * ============================================================ * * Tailwind gère la MISE EN PAGE. Ce fichier gère : * - les PALETTES DE COULEUR du site (variables CSS) * - les animations mignonnes (pop, cartes 3D, fond animé...) * * ▸ Comment marchent les palettes ? * Chaque palette est un jeu de variables appliqué sur la * balise via data-palette="coral | tropical | navy | wine". * On change de palette en JS (assets/js/ui.js → applyPalette). * TOUTES les couleurs importantes du site viennent de ces * variables, donc changer de palette recolore tout d'un coup. * ============================================================ */ /* -------- Polices arrondies (chargées via Google Fonts) -------- */ :root { --font-title: 'Baloo 2', system-ui, sans-serif; --font-body: 'Quicksand', system-ui, sans-serif; } /* ============================================================ * PALETTE PAR DÉFAUT — « Coral » (Tangerine / Salmon / Peach / * Vanilla / Tea Green). Claire, gourmande et ensoleillée. * ============================================================ */ :root, html[data-palette="coral"] { color-scheme: light; --bg: #fff6ee; /* crème pêche très clair */ --aura-1: #fec3a6; /* peach fuzz */ --aura-2: #cdeac0; /* tea green */ --aura-3: #ff928b; /* sweet salmon*/ --surface: #ffffff; --surface-2: #fff2e9; --text: #4a2b20; /* brun chaud profond (bon contraste sur crème) */ --text-soft: #a07c6d; --hair: #f6ddcd; /* fines bordures */ --accent: #ffac81; /* tangerine dream — boutons principaux */ --accent-2: #ff928b; /* sweet salmon — boutons secondaires */ --accent-3: #cdeac0; /* tea green — 3e accent */ --accent-ink: #5c2f1e; /* texte SUR les accents (foncé = lisible) */ --accent-soft: #ffe7d8; /* fond teinté très clair */ --accent-strong:#e26a4d; /* couleur de texte accent sur surface claire */ --hero-from: #fec3a6; --hero-to: #cdeac0; --card-a-from: #ffd9c8; --card-a-to: #ffb9ad; --card-b-from: #e5f3d9; --card-b-to: #f3eeb6; --glow: rgba(255,146,139,.55); --glow-soft: rgba(255,172,129,.40); } /* ============================================================ * PALETTE « Tropical » — Cerulean / Teal / Light Yellow / * Soft Apricot / Vibrant Coral. Fraîche et vitaminée. * ============================================================ */ html[data-palette="tropical"] { color-scheme: light; --bg: #fffdf1; --aura-1: #00afb9; --aura-2: #fed9b7; --aura-3: #f07167; --surface: #ffffff; --surface-2: #f4fbfb; --text: #123c44; --text-soft: #5f8188; --hair: #d7eef0; --accent: #00afb9; --accent-2: #f07167; --accent-3: #fed9b7; --accent-ink: #08343a; --accent-soft: #d6f2f4; --accent-strong:#0081a7; --hero-from: #fdfcdc; --hero-to: #fed9b7; --card-a-from: #c9f0f2; --card-a-to: #9fe3e8; --card-b-from: #ffe0cf; --card-b-to: #f9c7ad; --glow: rgba(0,175,185,.45); --glow-soft: rgba(240,113,103,.32); } /* ============================================================ * PALETTE « Navy » — Yale / Oxford / Prussian / Powder / * Mint Cream. Sombre, chic et studieuse. * ============================================================ */ html[data-palette="navy"] { color-scheme: dark; --bg: #0b2545; --aura-1: #134074; --aura-2: #13315c; --aura-3: #8da9c4; --surface: #16305a; --surface-2: #1b3a68; --text: #eef4ed; --text-soft: #a7c0d8; --hair: rgba(141,169,196,.28); --accent: #8da9c4; /* powder blue, texte foncé dessus */ --accent-2: #eef4ed; /* mint cream */ --accent-3: #4f79a8; --accent-ink: #0b2545; --accent-soft: rgba(141,169,196,.18); --accent-strong:#b9cfe3; --hero-from: #134074; --hero-to: #13315c; --card-a-from: #dbe6f2; --card-a-to: #b7ccdf; --card-b-from: #eef4ed; --card-b-to: #cdd9d1; --glow: rgba(11,37,69,.7); --glow-soft: rgba(19,49,92,.6); } /* ============================================================ * PALETTE « Wine » — Mahogany / Black Cherry / Dark Wine / * Brown Red. Sombre, intense et romantique. * ============================================================ */ html[data-palette="wine"] { color-scheme: dark; --bg: #250902; --aura-1: #640d14; --aura-2: #800e13; --aura-3: #ad2831; --surface: #3a0810; --surface-2: #490b14; --text: #f9e5da; --text-soft: #cd968d; --hair: rgba(200,143,134,.24); --accent: #ad2831; --accent-2: #800e13; --accent-3: #c14b52; --accent-ink: #fff2ec; --accent-soft: rgba(173,40,49,.22); --accent-strong:#e79489; --hero-from: #640d14; --hero-to: #ad2831; --card-a-from: #f6d9cf; --card-a-to: #eeb6a9; --card-b-from: #f3ddd0; --card-b-to: #e6b7a0; --glow: rgba(173,40,49,.5); --glow-soft: rgba(100,13,20,.55); } /* ============================================================ * BASE * ============================================================ */ body { font-family: var(--font-body); color: var(--text); background: var(--bg); min-height: 100vh; transition: background-color .5s ease, color .3s ease; overflow-x: hidden; } h1, h2, h3, .font-title { font-family: var(--font-title); } .surface { background: var(--surface); color: var(--text); } .surface-2 { background: var(--surface-2); color: var(--text); } .text-soft { color: var(--text-soft); } .text-accent { color: var(--accent-strong); } /* Fines bordures qui suivent la palette (surcharge du `border` de Tailwind) */ .border { border-color: var(--hair) !important; } /* ============================================================ * COULEURS SÉMANTIQUES (boutons, badges, dégradés) * → elles utilisent les variables, donc changent avec la palette * ============================================================ */ .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-secondary { background: var(--accent-2); color: var(--accent-ink); } .btn-accent3 { background: var(--accent-3); color: var(--accent-ink); } .badge-primary { background: var(--accent); color: var(--accent-ink); } .grad-hero { background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); } .grad-primary { background: linear-gradient(95deg, var(--accent), var(--accent-2)); color: var(--accent-ink); } .grad-card-a { background: linear-gradient(140deg, var(--card-a-from), var(--card-a-to)); } .grad-card-b { background: linear-gradient(140deg, var(--card-b-from), var(--card-b-to)); } .grad-soft { background: var(--accent-soft); } /* Encadré "contour" : fond neutre (pas de couleur pleine) + bord coloré. Utilisé pour les panneaux qui contiennent du texte (bandeau d'accueil...). */ .panel-outline { background: var(--surface); border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); } /* État "sélectionné" (avatar choisi, carte de choix cochée) */ .avatar-selected { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); } .choice-selected { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft); } /* ============================================================ * 1) Effet "POP" au survol / au clic * ============================================================ */ .pop { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease; will-change: transform; } .pop:hover { transform: translateY(-3px) scale(1.04); } .pop:active { transform: translateY(0) scale(.96); } .pop-lg:hover { transform: translateY(-4px) scale(1.06) rotate(-1deg); } .pop-lg:active { transform: scale(.95); } /* ============================================================ * 2) Ombres douces et colorées (teintées par la palette) * ============================================================ */ .shadow-soft { box-shadow: 0 14px 40px -18px var(--glow-soft); } .shadow-cute { box-shadow: 0 18px 50px -20px var(--glow); } .shadow-float { box-shadow: 0 24px 60px -24px var(--glow); } /* ============================================================ * 3) FOND ANIMÉ ORIGINAL * (a) une "aurore" de dégradés qui ondule très lentement * (b) de petits cœurs & étincelles qui montent en flottant * ============================================================ */ /* (a) Aurore : 3 halos mous qui se déplacent doucement */ .aurora { position: fixed; inset: -20% -20% -20% -20%; z-index: 0; pointer-events: none; background: radial-gradient(38vmax 38vmax at 20% 18%, var(--aura-1), transparent 60%), radial-gradient(34vmax 34vmax at 82% 30%, var(--aura-2), transparent 62%), radial-gradient(30vmax 30vmax at 55% 88%, var(--aura-3), transparent 60%); opacity: .5; filter: blur(30px) saturate(115%); animation: auroraDrift 26s ease-in-out infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(3%, -2%, 0) scale(1.08);} 66% { transform: translate3d(-3%, 2%, 0) scale(1.04);} 100% { transform: translate3d(2%, 3%, 0) scale(1.1); } } /* (b) Petits éléments flottants (cœurs / étincelles), injectés en JS */ .floaties { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; color: var(--accent); } .floaty { position: absolute; bottom: -12vh; width: var(--s, 26px); height: var(--s, 26px); opacity: 0; color: inherit; animation: floatUp var(--t, 24s) linear infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 6px 10px var(--glow-soft)); } .floaty svg { width: 100%; height: 100%; display: block; } @keyframes floatUp { 0% { transform: translateY(0) translateX(0) rotate(0deg) scale(.6); opacity: 0; } 12% { opacity: .5; } 50% { transform: translateY(-58vh) translateX(3vw) rotate(180deg) scale(1); } 88% { opacity: .5; } 100% { transform: translateY(-118vh) translateX(-2vw) rotate(360deg) scale(.7); opacity: 0; } } /* On garde le contenu au-dessus du décor */ #view, #toast-zone { position: relative; z-index: 10; } /* ============================================================ * 4) La CARTE QUI SE RETOURNE (révélation des réponses) 🃏 * ============================================================ */ .flip { perspective: 1200px; } .flip-inner { position: relative; transition: transform .7s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; } .flip.is-flipped .flip-inner { transform: rotateY(180deg); } .flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 1.75rem; } .flip-back { transform: rotateY(180deg); } /* ============================================================ * 5) Petites animations d'ambiance * ============================================================ */ .appear { animation: appear .45s cubic-bezier(.34,1.4,.5,1) both; } @keyframes appear { from { opacity:0; transform: translateY(14px) scale(.98);} to { opacity:1; transform:none;} } .stagger > * { animation: appear .45s cubic-bezier(.34,1.4,.5,1) both; } .stagger > *:nth-child(1){animation-delay:.03s} .stagger > *:nth-child(2){animation-delay:.07s} .stagger > *:nth-child(3){animation-delay:.11s} .stagger > *:nth-child(4){animation-delay:.15s} .stagger > *:nth-child(5){animation-delay:.19s} .stagger > *:nth-child(6){animation-delay:.23s} .stagger > *:nth-child(7){animation-delay:.27s} .stagger > *:nth-child(8){animation-delay:.31s} .bounce-soft { animation: bounceSoft 2.4s ease-in-out infinite; display:inline-block; } @keyframes bounceSoft { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } .wiggle-hover:hover { animation: wiggle .4s ease-in-out; } @keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)} } .pulse-dot { animation: pulseDot 1.4s ease-in-out infinite; } @keyframes pulseDot { 0%,100%{transform:scale(1); box-shadow:0 0 0 0 var(--glow)} 50%{transform:scale(1.15); box-shadow:0 0 0 8px transparent} } /* ============================================================ * 6) Toasts * ============================================================ */ #toast-zone { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; } .toast { background: var(--surface); color: var(--text); padding: 12px 20px; border-radius: 999px; box-shadow: 0 14px 40px -12px var(--glow); font-weight: 600; font-size: 14px; border: 2px solid var(--accent-soft); animation: toastIn .4s cubic-bezier(.34,1.56,.64,1) both; } .toast.leaving { animation: toastOut .3s ease forwards; } @keyframes toastIn { from{opacity:0; transform:translateY(20px) scale(.9)} to{opacity:1; transform:none} } @keyframes toastOut { to {opacity:0; transform:translateY(20px) scale(.9)} } /* ============================================================ * 7) Confettis * ============================================================ */ .confetti { position: fixed; top: -20px; z-index: 80; pointer-events: none; font-size: 22px; animation: confettiFall linear forwards; } @keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* ============================================================ * 8) Champs de saisie & divers * ============================================================ */ .input-cute { background: var(--surface); color: var(--text); border: 2px solid var(--hair); border-radius: 1.25rem; padding: .8rem 1.1rem; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; font-family: var(--font-body); } .input-cute::placeholder { color: var(--text-soft); opacity: .8; } .input-cute:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .screen[hidden] { display: none; } /* Barre de défilement teintée par la palette */ * { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } /* Accessibilité : moins d'animations si l'utilisateur le demande */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .05ms !important; } .aurora, .floaties { display: none; } }