/* ========================================================= HEARTOPIA ALMANACH — design tokens ========================================================= */ :root{ --bg: #FFF8F1; --bg-soft: #FFF1E6; --surface: #FFFFFF; --border: #F1E1D4; --text: #3D2B31; --text-muted: #8A7680; --brand: #EF5C77; /* coeur / marque */ --brand-dark: #C93E58; --gold: #FFB627; /* classement / etoiles */ --gold-text: #92600A; --c-classement: #FFB627; --c-oiseaux: #4FA8E0; --c-peche: #2FBFB0; --c-insectes: #9B8AFB; --c-cuisine: #FF8C5A; --c-cultures: #7CB342; --c-fleurs: #FF6FA5; --c-cueillette: #B5794A; --radius-s: 10px; --radius-m: 16px; --radius-l: 26px; --shadow-s: 0 2px 8px rgba(61,43,49,.06); --shadow-m: 0 8px 24px rgba(61,43,49,.10); --shadow-l: 0 16px 40px rgba(61,43,49,.14); --font-display: 'Baloo 2', system-ui, sans-serif; --font-body: 'Nunito', system-ui, sans-serif; color-scheme: light; } /* Thème sombre — activé via data-theme="dark" sur , piloté par le bouton bascule (voir js/app.js). Palette pensée pour Heartdata, pas une inversion automatique du thème clair. */ :root[data-theme="dark"]{ --bg: #180F29; --bg-soft: #221735; --surface: #281C3D; --border: #3E2F5B; --glow-1: #6A3F86; /* halo violet, coin haut-droit */ --glow-2: #1E4A6B; /* halo bleu nuit, coin bas-gauche */ --text: #F6ECF1; --text-muted: #B7A6C9; --brand: #FF7C97; --brand-dark: #FFA4B7; --gold: #FFC857; --gold-text: #FFC857; --c-classement: #FFC857; --c-oiseaux: #6FBBEF; --c-peche: #4FD9C8; --c-insectes: #B6A6FF; --c-cuisine: #FFA478; --c-cultures: #9BCB5D; --c-fleurs: #FF93C4; --c-cueillette: #D2A277; --shadow-s: 0 2px 8px rgba(0,0,0,.28); --shadow-m: 0 8px 24px rgba(0,0,0,.34); --shadow-l: 0 16px 40px rgba(0,0,0,.42); color-scheme: dark; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--bg); color: var(--text); font-family: var(--font-body); min-height:100vh; position: relative; overflow-x: hidden; /* Rien n'est sélectionnable/déplaçable par défaut : */ -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; } /* En sombre, la couleur plate d'origine paraissait terne : on pose deux halos très doux (violet en haut-droite, bleu nuit en bas- gauche) pour un fond "ciel nocturne" au lieu d'un aplat uniforme. Le halo reste fixe (pas de scroll) et ne change rien en clair. */ :root[data-theme="dark"] body{ background: radial-gradient(ellipse 62vw 52vh at 90% -8%, color-mix(in srgb, var(--glow-1) 60%, transparent), transparent 72%), radial-gradient(ellipse 58vw 48vh at -8% 106%, color-mix(in srgb, var(--glow-2) 55%, transparent), transparent 72%), var(--bg); background-attachment: fixed; } /* Les champs de saisie restent, eux, normalement utilisables */ input, select, textarea{ -webkit-user-select: text; -moz-user-select: text; user-select: text; } img, svg, .card, .pad-btn, .lb-row, .badge, .star-chip{ -webkit-user-drag: none; -webkit-touch-callout: none; } h1,h2,h3,h4{ font-family: var(--font-display); margin:0; } button{ font-family: inherit; } a{ color: var(--brand-dark); } ::selection{ background: var(--brand); color:#fff; } :focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* ========================================================= Ambient background decor ========================================================= */ .bg-decor{ position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bg-decor .drift{ position: absolute; font-size: 2.4rem; opacity: .10; filter: saturate(0.9); animation: driftMove 34s ease-in-out infinite, driftTwinkle 5s ease-in-out infinite; } .drift-1{ top: 6%; left: -8%; animation-duration: 38s, 4.5s; } .drift-2{ top: 55%; left: -12%; animation-duration: 30s, 5.5s; animation-delay: -8s, -1s; font-size: 2rem;} .drift-3{ top: 20%; left: -10%; animation-duration: 44s, 6s; animation-delay: -20s, -3s; } .drift-4{ top: 75%; left: -14%; animation-duration: 26s, 4s; animation-delay: -4s, -2s; font-size: 1.8rem;} .drift-5{ top: 38%; left: -10%; animation-duration: 33s, 5s; animation-delay: -14s, -.5s; font-size: 2.1rem;} .drift-6{ top: 88%; left: -9%; animation-duration: 40s, 6.5s; animation-delay: -27s, -4s; font-size: 1.7rem;} .drift-7{ top: 2%; left: -13%; animation-duration: 24s, 4.8s; animation-delay: -11s, -1.6s; font-size: 1.6rem;} .drift-8{ top: 63%; left: -7%; animation-duration: 36s, 5.2s; animation-delay: -30s, -2.3s; font-size: 2.2rem;} /* Trajectoire en plusieurs étapes (plutôt qu'une ligne droite) pour une traversée plus vivante, avec un léger tangage. */ @keyframes driftMove{ 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(34vw, -5vh) rotate(9deg); } 50% { transform: translate(70vw, 3vh) rotate(-7deg); } 75% { transform: translate(104vw, -4vh) rotate(12deg); } 100% { transform: translate(138vw, 0) rotate(20deg); } } /* Scintillement doux, désynchronisé de la trajectoire */ @keyframes driftTwinkle{ 0%, 100%{ opacity: .10; } 50%{ opacity: .20; } } :root[data-theme="dark"] .bg-decor .drift{ opacity: .16; filter: saturate(1.15) brightness(1.2); text-shadow: 0 0 14px color-mix(in srgb, var(--brand) 55%, transparent); } /* ========================================================= Header ========================================================= */ .topbar{ position: sticky; top:0; z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid var(--border); } .topbar-inner{ max-width: 2400px; margin: 0 auto; padding: 18px 24px 10px; display:flex; align-items:center; gap: 20px; } .brand{ display:flex; align-items:center; gap:12px; margin-right:auto; order:1; } /* Bouton burger -- masqué en desktop, seul le CSS mobile plus bas l'affiche */ .burger-btn{ display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-s); cursor: pointer; flex-shrink: 0; } .burger-btn span{ display:block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s ease, opacity .2s ease; } .burger-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .burger-btn[aria-expanded="true"] span:nth-child(2){ opacity: 0; } .burger-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* Regroupe compte + thème + burger sur une même ligne. Sur mobile, le burger reste à gauche (position naturelle, inchangée qu'il soit ouvert ou fermé) et compte + thème apparaissent à droite de cette même ligne une fois le menu ouvert. */ .mobile-actions{ display:flex; align-items:center; gap: 14px; order: 3; } .mobile-actions-right{ display:flex; align-items:center; gap: 14px; } .topbar-controls{ display:flex; align-items:center; gap: 20px; order: 2; } .brand-heart-icon{ width: 34px; height: 34px; fill: var(--brand); filter: drop-shadow(0 3px 6px rgba(239,92,119,.35)); animation: heartbeat 2.6s ease-in-out infinite; flex-shrink: 0; } @keyframes heartbeat{ 0%,100%{ transform: scale(1); } 15%{ transform: scale(1.14); } 30%{ transform: scale(0.98); } 45%{ transform: scale(1.08); } 60%{ transform: scale(1); } } .brand-text h1{ font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1; } .brand-text h1 span{ color: var(--brand); } .tagline{ margin: 4px 0 0; font-size: .82rem; color: var(--text-muted); font-weight: 600; } /* Heart meter */ .heart-meter{ display:flex; align-items:center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px 6px 8px; box-shadow: var(--shadow-s); font-family: inherit; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .heart-meter:hover{ transform: translateY(-1px); box-shadow: var(--shadow-m); border-color: var(--brand); } .heart-meter:active{ transform: translateY(0); } .heart-meter-svg{ width: 34px; height:34px; } .heart-outline{ fill: #FBE6EA; stroke: var(--brand); stroke-width: 3; } :root[data-theme="dark"] .heart-outline{ fill: color-mix(in srgb, var(--brand) 16%, var(--surface)); } .heart-fill{ fill: var(--brand); transition: y 1.1s cubic-bezier(.22,1,.36,1), height 1.1s cubic-bezier(.22,1,.36,1); } .heart-meter-label{ display:flex; flex-direction: column; line-height: 1.05; } .heart-meter-label strong{ font-family: var(--font-display); font-size: 1rem; color: var(--brand-dark); } .heart-meter-label span{ font-size: .68rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .reload-btn{ display:flex; align-items:center; gap:6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 999px; cursor:pointer; font-weight: 700; font-size: .82rem; box-shadow: var(--shadow-s); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .reload-btn svg{ width:16px; height:16px; fill: var(--text-muted); transition: transform .5s ease; } .reload-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-m); background: var(--bg-soft); } .reload-btn:active svg{ transform: rotate(220deg); } .reload-btn.spinning svg{ animation: spin .7s linear; } @keyframes spin{ to{ transform: rotate(360deg); } } /* Bascule clair / sombre */ .theme-toggle{ position: relative; width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); cursor: pointer; flex-shrink: 0; box-shadow: var(--shadow-s); transition: background .2s ease; } .theme-toggle .knob{ position:absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); display:flex; align-items:center; justify-content:center; font-size: .8rem; box-shadow: var(--shadow-s); transition: transform .28s cubic-bezier(.34,1.56,.64,1); } :root[data-theme="dark"] .theme-toggle .knob{ transform: translateX(22px); } /* ========================================================= Controller-style nav ("pad") ========================================================= */ .pad-nav{ max-width: 2400px; margin: 0 auto; padding: 10px 24px 16px; display:flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; } .pad-btn{ --c: var(--brand); flex: 0 0 auto; display:flex; flex-direction: column; align-items:center; gap:4px; background: var(--surface); border: 2px solid color-mix(in srgb, var(--c) 35%, var(--surface)); border-radius: 18px; padding: 8px 14px 7px; cursor:pointer; position: relative; transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease; box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 45%, var(--surface)), var(--shadow-s); } .pad-btn .pad-icon{ width: 34px; height:34px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 1.15rem; background: color-mix(in srgb, var(--c) 16%, var(--surface)); transition: background .2s ease; } .pad-btn .pad-label{ font-size: .68rem; font-weight: 800; color: var(--text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; } .pad-btn:hover{ transform: translateY(-3px); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 45%, var(--surface)), var(--shadow-m); } .pad-btn:active{ transform: translateY(1px) scale(.96); } .pad-btn.active{ background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-color: var(--c); box-shadow: 0 3px 0 var(--c), var(--shadow-m); } .pad-btn.active .pad-icon{ background: var(--c); } .pad-btn.active .pad-label{ color: var(--c); } .pad-btn.pulse .pad-icon{ animation: padPulse .5s ease; } @keyframes padPulse{ 0%{ transform: scale(1); } 40%{ transform: scale(1.35); } 100%{ transform: scale(1); } } /* ========================================================= Main app area ========================================================= */ .app{ max-width: 2400px; margin: 0 auto; padding: 22px 24px 60px; position: relative; z-index: 1; min-height: 50vh; } .loader{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 80px 0; color: var(--text-muted); gap: 10px; } .loader-heart{ font-size: 2.6rem; animation: heartbeat 1.1s ease-in-out infinite; } /* Page header */ .page-head{ display:flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; animation: fadeUp .5s ease both; } .page-head h2{ font-size: 1.7rem; color: var(--text); } .page-head p{ margin: 4px 0 0; color: var(--text-muted); font-weight: 600; font-size: .92rem; max-width: 60ch; } .count-chip{ background: var(--surface); border: 2px solid var(--border); border-radius: 999px; padding: 8px 18px; font-weight: 800; font-family: var(--font-display); color: var(--text); box-shadow: var(--shadow-s); white-space: nowrap; } .count-chip b{ color: var(--cat-color, var(--brand)); } /* Toolbar */ .toolbar{ position: relative; z-index: 5; display:flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; animation: fadeUp .5s ease .05s both; } .toolbar .search-wrap{ position: relative; flex: 1 1 220px; } .toolbar .search-wrap svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; fill: var(--text-muted); } .search-clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background: var(--bg-soft); color: var(--text-muted); font-size:.72rem; font-weight:800; line-height:1; cursor:pointer; padding:0; transition: background .15s ease, color .15s ease, transform .15s ease; } .search-clear:hover{ background: color-mix(in srgb, var(--brand) 16%, var(--bg-soft)); color: var(--brand-dark); transform: translateY(-50%) scale(1.08); } .search-clear[hidden]{ display:none; } .toolbar input[type="search"]{ width:100%; padding: 11px 34px 11px 38px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); font-family: inherit; font-size: .92rem; font-weight: 700; color: var(--text); transition: border-color .18s ease, box-shadow .18s ease; } .toolbar input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; } .toolbar input[type="search"]:focus{ border-color: var(--cat-color, var(--brand)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat-color, var(--brand)) 18%, transparent); outline: none; } .toolbar select, .toolbar .seg-btn{ padding: 10px 14px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); font-weight: 700; font-size: .84rem; color: var(--text); cursor: pointer; font-family: inherit; } .toolbar select:focus{ outline: none; border-color: var(--cat-color, var(--brand)); } .multiselect{ position: relative; } .multiselect-btn{ padding: 10px 14px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); font-weight: 700; font-size: .84rem; color: var(--text); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; transition: border-color .18s ease, background .18s ease; } .multiselect-btn::after{ content: '▾'; font-size: .65rem; color: var(--text-muted); margin-left: 2px; } .multiselect-btn.active{ border-color: var(--cat-color, var(--brand)); background: color-mix(in srgb, var(--cat-color, var(--brand)) 14%, var(--surface)); } .multiselect-btn.open{ border-color: var(--cat-color, var(--brand)); } .ms-count{ background: var(--cat-color, var(--brand)); color: white; border-radius: 999px; font-size: .68rem; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } .multiselect-panel{ position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-l); padding: 10px; min-width: 230px; max-width: 320px; animation: fadeUp .15s ease both; } .ms-panel-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--border); } .ms-panel-title{ font-size: .72rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; } .ms-clear{ background: none; border: none; cursor: pointer; color: var(--cat-color, var(--brand)); font-weight: 700; font-size: .72rem; font-family: inherit; padding: 0; white-space: nowrap; } .ms-clear:hover{ text-decoration: underline; } .ms-list{ max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .ms-item{ display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--text); } .ms-item:hover{ background: var(--bg-soft); } .ms-item input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--cat-color, var(--brand)); cursor: pointer; flex: 0 0 auto; } .seg{ display:flex; border: 2px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); } .seg-btn{ border: none; border-radius: 0; background: transparent; padding: 10px 14px; } .seg-btn.active{ background: var(--cat-color, var(--brand)); color: white; } .sort-dir-btn{ width: 40px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; display:flex; align-items:center; justify-content:center; transition: transform .2s ease; } .sort-dir-btn svg{ width:16px; height:16px; fill: var(--text-muted); transition: fill .2s ease; } .sort-dir-btn.desc{ border-color: var(--cat-color, var(--brand)); background: color-mix(in srgb, var(--cat-color, var(--brand)) 12%, var(--surface)); } .sort-dir-btn.desc svg{ fill: var(--cat-color, var(--brand)); } .sort-dir-btn:hover{ background: var(--bg-soft); } /* ========================================================= Grid & cards ========================================================= */ .grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-items: start; } .card{ background: var(--surface); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-s); border: 1px solid var(--border); transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease; animation: cardIn .45s cubic-bezier(.22,1,.36,1) both; display:flex; flex-direction: column; } .card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-l); } @keyframes cardIn{ from{ opacity:0; transform: translateY(14px) scale(.97); } to{ opacity:1; transform: translateY(0) scale(1); } } @keyframes fadeUp{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } } .card-media{ position: relative; aspect-ratio: 2.4/1; background: var(--bg-soft); overflow: hidden; display:flex; align-items:center; justify-content:center; } .card-img{ width:100%; height:100%; object-fit: contain; object-position: center; padding: 10px; display:block; transition: transform .4s ease; } .card:hover .card-img{ transform: scale(1.07); } .card-img-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size: 2.6rem; background: color-mix(in srgb, var(--cat-color, var(--brand)) 14%, white); opacity: 0; } .card-img.is-hidden{ display:none; } .card-img-fallback.show{ opacity:1; } .rank-chip{ position:absolute; top:8px; left:8px; background: rgba(61,43,49,.72); color:#fff; font-family: var(--font-display); font-weight: 700; font-size: .72rem; padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(3px); } .collect-btn{ position:absolute; top:8px; right:8px; width: 32px; height:32px; border-radius: 50%; border: none; background: rgba(255,255,255,.85); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; cursor: pointer; box-shadow: var(--shadow-s); opacity: 0; transition: transform .15s ease, opacity .18s ease; } .card:hover .collect-btn, .collect-btn:focus-visible, .collect-btn[aria-pressed="true"]{ opacity: 1; } .collect-btn svg{ width: 16px; height:16px; fill: none; stroke: var(--brand); stroke-width: 2; transition: fill .2s ease, stroke .2s ease, transform .2s ease; } .collect-btn:hover{ transform: scale(1.1); } .collect-btn[aria-pressed="true"] svg{ fill: var(--brand); stroke: var(--brand); } .collect-btn.pop svg{ animation: pop .4s cubic-bezier(.34,1.56,.64,1); } @keyframes pop{ 0%{ transform: scale(1); } 45%{ transform: scale(1.5); } 100%{ transform: scale(1); } } .card-body{ padding: 12px 14px 14px; display:flex; flex-direction: column; gap: 8px; flex:1; } .card-name{ font-size: 1rem; line-height: 1.15; color: var(--text); } .card.card--mystery .card-name{ color: var(--text-muted); font-style: italic; } .badge.badge-unknown{ background: transparent; border-style: dashed; color: var(--text-muted); } .card-badges{ display:flex; flex-wrap:wrap; gap: 5px; } .badge{ font-size: .66rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); white-space: normal; overflow-wrap: anywhere; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; } .badge-wide{ flex: 0 1 auto; width: max-content; max-width: 100%; border-radius: var(--radius-s); padding: 7px 11px; text-align: left; align-items: flex-start; line-height: 1.4; } .card-stars{ margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding-top: 8px; border-top: 1px dashed var(--border); } .star-chip{ min-width: 0; text-align:center; border-radius: 8px; padding: 5px 3px; background: var(--bg-soft); font-size: .64rem; font-weight: 800; color: var(--text-muted); line-height: 1.3; } .star-chip--empty{ background: transparent; border: 1px dashed var(--border); opacity: .5; } .star-chip--empty b{ font-weight: 700; } .star-chip b{ display:block; font-size: .8rem; color: var(--text); font-family: var(--font-display); white-space: nowrap; overflow-wrap: normal; word-break: normal; } .star-glyphs{ display:block; font-size: .74rem; line-height: 1; white-space: nowrap; letter-spacing: -0.5px; color: var(--gold); margin-bottom: 1px; } .chip-coin{ display:inline-block; margin-right: 2px; } .star-chip.max{ background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: var(--gold-text); } .star-chip.max b{ color: var(--gold-text); } /* Le 5ème palier (prix max) occupe toujours sa propre ligne complète */ .star-chip:nth-child(5){ grid-column: 1 / -1; display:flex; flex-direction: column; align-items:center; justify-content:center; gap:2px; padding: 7px 12px; } .star-chip:nth-child(5) .star-glyphs{ margin-bottom:0; font-size: .95rem; } .star-chip:nth-child(5) b{ font-size: 1rem; } /* ========================================================= Leaderboard (classement maître) ========================================================= */ .chart-panel{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 20px 22px; margin-bottom: 24px; box-shadow: var(--shadow-s); animation: fadeUp .5s ease .05s both; } .chart-panel h3{ font-size: 1rem; margin-bottom: 14px; } .chart-row{ display:flex; align-items:center; gap: 10px; margin-bottom: 9px; font-size: .82rem; font-weight: 700; } .chart-row .chart-label{ width: 140px; flex-shrink:0; color: var(--text-muted); } .chart-track{ flex:1; height: 12px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; } .chart-fill{ display:block; height:100%; border-radius: 999px; width:0; transition: width 1s cubic-bezier(.22,1,.36,1); } .chart-count{ width: 62px; text-align:right; color: var(--text); } .leaderboard{ display:flex; flex-direction: column; gap: 8px; } .lb-row{ display:grid; grid-template-columns: 44px 40px 1fr auto 1fr; align-items:center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px 16px; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; animation: cardIn .4s ease both; } .lb-row:hover{ transform: translateX(4px); box-shadow: var(--shadow-m); border-color: var(--cat-color, var(--brand)); } .lb-rank{ font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text-muted); text-align:center; } .lb-rank.medal{ font-size: 1.3rem; } .lb-media{ width: 40px; height: 40px; border-radius: 10px; background: var(--bg-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; } .lb-thumb{ width:100%; height:100%; object-fit: contain; padding: 3px; } .lb-media-fallback{ font-size: 1.1rem; } .lb-main{ display:flex; flex-direction:column; gap:2px; min-width:0; } .lb-name{ font-weight: 800; font-size: .92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lb-cat{ font-size: .72rem; color: var(--text-muted); font-weight:700; } .lb-price{ font-family: var(--font-display); font-weight: 700; color: var(--gold-text); white-space: nowrap; } .lb-info{ font-size: .78rem; color: var(--text-muted); font-weight: 600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align: right; } /* Notes panel (fleurs hybridation etc.) */ .notes-panel{ background: color-mix(in srgb, var(--cat-color, var(--brand)) 10%, var(--surface)); border: 1px dashed var(--cat-color, var(--brand)); border-radius: var(--radius-m); padding: 16px 20px; margin-bottom: 20px; font-size: .85rem; color: var(--text); animation: fadeUp .5s ease .1s both; } .notes-panel h4{ font-size: .82rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; color: var(--cat-color); } .notes-panel ul{ margin:0; padding-left: 18px; } .notes-panel li{ margin-bottom: 4px; } /* Empty state */ .empty-state{ text-align:center; padding: 60px 20px; color: var(--text-muted); animation: fadeUp .4s ease both; } .empty-state .emoji{ font-size: 2.6rem; display:block; margin-bottom: 10px; } .empty-state button{ margin-top: 14px; background: var(--brand); color:white; border:none; padding: 10px 20px; border-radius: 999px; font-weight: 800; cursor: pointer; transition: transform .15s ease; } .empty-state button:hover{ transform: translateY(-2px); } /* ========================================================= Compte Heartdata (sync serveur) ========================================================= */ .account-btn{ position: relative; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: var(--shadow-s); transition: transform .18s ease, box-shadow .18s ease, color .18s ease; flex-shrink:0; } .account-btn svg{ width:20px; height:20px; fill: currentColor; } .account-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-m); color: var(--brand); } .account-btn.is-logged-in{ color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); } .account-dot{ position:absolute; top:3px; right:3px; width:10px; height:10px; border-radius:50%; background: var(--c-cultures); border: 2px solid var(--surface); } .account-dot.syncing{ background: var(--c-classement); animation: pulseDot 1s ease-in-out infinite; } .account-dot.error{ background: var(--brand-dark); } @keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } } .modal-backdrop{ position: fixed; inset:0; background: rgba(20,12,20,.5); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; padding: 20px; z-index: 200; animation: fadeUp .2s ease both; } .modal-backdrop[hidden]{ display:none; } .auth-modal{ position: relative; width: 100%; max-width: 380px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); border-radius: var(--radius-l); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent), var(--shadow-l); padding: 30px 26px 26px; overflow: hidden; } .auth-modal::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background: linear-gradient(90deg, var(--brand), var(--c-fleurs, var(--brand))); } .modal-close{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background: var(--bg-soft); color: var(--text-muted); cursor:pointer; font-size: .8rem; line-height: 1; display:flex; align-items:center; justify-content:center; transition: color .15s ease, transform .15s ease; } .modal-close:hover{ color: var(--brand); transform: rotate(90deg); } .auth-tabs{ display:flex; gap:6px; background: var(--bg-soft); border-radius: 999px; padding: 4px; margin: 8px 0 20px; } .auth-tab{ flex:1; border:none; background:transparent; padding: 9px 10px; border-radius: 999px; font-weight: 800; font-size: .82rem; color: var(--text-muted); cursor:pointer; font-family: inherit; transition: background .18s ease, color .18s ease; } .auth-tab.active{ background: var(--surface); color: var(--brand-dark); box-shadow: var(--shadow-s); } .auth-heading{ font-size: 1.25rem; margin: 2px 0 4px; } .auth-sub{ color: var(--text-muted); font-size: .85rem; font-weight: 600; margin: 0 0 18px; line-height:1.5; } .auth-form{ display:flex; flex-direction:column; gap:14px; } .auth-field{ display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:700; color: var(--text-muted); } .auth-field input{ font-family: inherit; font-size: .92rem; font-weight: 700; color: var(--text); padding: 11px 14px; border-radius: var(--radius-m); border: 2px solid var(--border); background: var(--bg); } .auth-field input:focus{ outline:none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); } .auth-field small{ font-weight:600; color: var(--text-muted); } .auth-error{ display:flex; align-items:center; gap:8px; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand-dark); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: var(--radius-m); padding: 10px 14px; font-size: .82rem; font-weight: 700; margin:0; } .auth-error[hidden]{ display:none; } .auth-success{ display:flex; align-items:center; gap:8px; background: color-mix(in srgb, var(--c-cultures, #4caf7d) 14%, var(--surface)); color: var(--c-cultures, #2e7d51); border: 1px solid color-mix(in srgb, var(--c-cultures, #4caf7d) 28%, transparent); border-radius: var(--radius-m); padding: 10px 14px; font-size: .82rem; font-weight: 700; margin:0; } .auth-success[hidden]{ display:none; } .auth-link-btn{ display:block; margin: 8px 0 0; background: none; border: none; color: var(--brand-dark); font-size: .78rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor:pointer; font-family: inherit; padding: 0; } .auth-link-btn:hover{ opacity: .8; } .auth-back{ display:block; background: none; border: none; color: var(--text-muted); font-size: .82rem; font-weight: 700; cursor:pointer; font-family: inherit; padding: 0; margin: 8px 0 16px; } .auth-back:hover{ color: var(--brand-dark); } .auth-submit{ margin-top: 4px; background: var(--brand); color:white; border:none; padding: 13px 20px; border-radius: 999px; font-weight: 800; font-size: .92rem; cursor:pointer; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent); transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease; } .auth-submit:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 42%, transparent); } .auth-submit:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; } .auth-hint{ margin: 16px 0 0; font-size: .74rem; color: var(--text-muted); text-align:center; line-height:1.5; } /* État "connecté" -- carte centrée type profil, plutôt qu'un formulaire */ .auth-connected{ text-align:center; padding-top: 6px; } .auth-avatar{ width:64px; height:64px; margin: 0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: 1.7rem; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 22%, var(--surface)), color-mix(in srgb, var(--c-fleurs, var(--brand)) 18%, var(--surface))); border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); box-shadow: var(--shadow-s); } .auth-connected .auth-heading{ text-align:center; } .auth-username{ display:inline-block; max-width:100%; margin: 0 0 14px; padding: 7px 16px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); font-weight: 800; font-size: .84rem; overflow-wrap: anywhere; } .auth-sync-status{ display:flex; align-items:center; justify-content:center; gap:7px; margin: 0 0 22px; color: var(--text-muted); font-size: .8rem; font-weight: 700; } .auth-sync-status .led{ width:8px; height:8px; border-radius:50%; background: var(--c-cultures); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-cultures) 25%, transparent); flex-shrink:0; } .auth-logout{ width:100%; background: transparent; color: var(--brand-dark); border: 2px solid color-mix(in srgb, var(--brand) 45%, var(--border)); padding: 12px 20px; border-radius: 999px; font-weight: 800; font-size: .9rem; font-family: inherit; cursor:pointer; transition: background .15s ease, transform .15s ease; } .auth-logout:hover{ background: color-mix(in srgb, var(--brand) 10%, transparent); transform: translateY(-2px); } .auth-delete-link{ display:block; margin: 14px auto 0; background: none; border: none; color: var(--text-muted); font-size: .78rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor:pointer; font-family: inherit; } .auth-delete-link:hover{ color: #d9455f; } .auth-avatar-danger{ background: linear-gradient(145deg, color-mix(in srgb, #d9455f 22%, var(--surface)), color-mix(in srgb, #d9455f 12%, var(--surface))); border-color: color-mix(in srgb, #d9455f 35%, transparent); } .auth-submit-danger{ background: #d9455f; box-shadow: 0 8px 20px color-mix(in srgb, #d9455f 35%, transparent); margin-bottom: 10px; } .auth-submit-danger:hover{ box-shadow: 0 8px 20px color-mix(in srgb, #d9455f 45%, transparent); } /* ========================================================= Modale "Ta collection" (clic sur la bulle de progression) ========================================================= */ .stats-modal{ position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); border-radius: var(--radius-l); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent), var(--shadow-l); padding: 30px 26px 26px; } .stats-modal::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background: linear-gradient(90deg, var(--brand), var(--c-fleurs, var(--brand))); } .stats-heading{ font-size: 1.3rem; margin: 2px 40px 4px 0; } .stats-sub{ color: var(--text-muted); font-size: .85rem; font-weight: 600; margin: 0 0 20px; line-height:1.5; } .stats-hero{ display:flex; flex-direction:column; align-items:center; gap: 6px; padding: 6px 0 26px; } .stats-hero-svg{ width: 96px; height: 96px; } .stats-hero-pct{ font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--brand-dark); line-height:1; } .stats-hero-count{ font-size: .84rem; font-weight:700; color: var(--text-muted); } .stats-hero-value{ margin-top: 4px; font-size: .8rem; font-weight: 800; color: var(--gold-text); background: color-mix(in srgb, var(--gold) 18%, var(--surface)); border-radius: 999px; padding: 4px 12px; } .stats-section-title{ font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 10px; } .stats-cat-list{ display:flex; flex-direction:column; gap:8px; margin-bottom: 24px; } .stats-cat-row{ display:grid; grid-template-columns: 34px 40px 1fr auto; align-items:center; gap: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 8px 12px; cursor: pointer; transition: transform .16s ease, border-color .16s ease; font-family: inherit; color: inherit; text-align: left; width: 100%; } .stats-cat-row:hover{ transform: translateX(3px); border-color: var(--cat-row-color, var(--brand)); } .stats-cat-icon{ font-size: 1.2rem; text-align:center; } .stats-cat-thumb{ width: 40px; height: 40px; border-radius: 9px; background: var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; } .stats-cat-thumb img{ width:100%; height:100%; object-fit:contain; padding:3px; } .stats-cat-main{ display:flex; flex-direction:column; min-width:0; } .stats-cat-name{ font-weight:800; font-size:.86rem; margin-bottom:4px; } .stats-cat-track{ display:block; height: 8px; background: var(--border); border-radius: 999px; overflow:hidden; } .stats-cat-fill{ display:block; height:100%; border-radius:999px; width:0; transition: width 1s cubic-bezier(.22,1,.36,1); } .stats-cat-count{ font-size:.78rem; font-weight:800; color:var(--text-muted); white-space:nowrap; } .stats-highlights{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .stats-highlight-card{ display:flex; align-items:center; gap: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 12px; cursor:pointer; font-family: inherit; color: inherit; text-align: left; transition: transform .16s ease, box-shadow .16s ease; } .stats-highlight-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-s); } .stats-highlight-thumb{ width: 54px; height: 54px; border-radius: 12px; background: var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; } .stats-highlight-thumb img{ width:100%; height:100%; object-fit:contain; padding:4px; } .stats-highlight-body{ display:flex; flex-direction:column; min-width:0; } .stats-highlight-label{ display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:2px; } .stats-highlight-name{ display:block; font-size:.86rem; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .stats-highlight-price{ display:block; font-size:.78rem; font-weight:700; color: var(--gold-text); margin-top:2px; } .stats-empty{ font-size:.84rem; color:var(--text-muted); font-weight:600; text-align:center; padding: 20px 0; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .drift{ display:none; } } /* Responsive */ @media (max-width: 720px){ .burger-btn{ display:flex; } .topbar-inner{ flex-wrap: wrap; row-gap: 12px; } .brand{ flex: 1 1 100%; } .mobile-actions{ order: 2; flex-basis: 100%; justify-content: space-between; } .mobile-actions-right{ display:none; } .topbar.menu-open .mobile-actions-right{ display:flex; } .topbar-controls{ order: 3; display:none; flex-basis: 100%; justify-content:center; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--border); } .topbar-controls .heart-meter{ width:100%; max-width: 320px; justify-content:center; } .topbar.menu-open .topbar-controls{ display:flex; animation: fadeUp .2s ease both; } .pad-nav{ display:none; } .topbar.menu-open .pad-nav{ display:flex; flex-wrap:wrap; animation: fadeUp .2s ease .05s both; } .reload-btn span{ display:none; } .lb-row{ grid-template-columns: 36px 34px 1fr auto; } .lb-media{ width:34px; height:34px; } .lb-info{ display:none; } .page-head{ align-items: flex-start; } }