/* ============================================================ top100.css — mise en page pyramide pour top100.php Cartes restructurées sur le même modèle que les widgets commerces (#card-top-*) : photo pleine carte, infos dispatchées en overlay aux 4 coins plutôt qu'empilées sous l'image. HTML attendu par carte (2 ajouts vs la version précédente, marqués ci-dessous) :

9.2

Nom du commerce Paris

============================================================ */ /* ── Tokens ───────────────────────────────────────────────── */ :root { /* Palette – light */ --bg: #f5f6fa; --bg-card: #ffffff; --bg-input: #f0f1f7; --border: #e2e4ef; --accent: #4f6ef7; --accent-hover: #3a57d8; --accent-muted: #eef0fd; --danger: #e5534b; --danger-muted: #fdf0ef; --success: #2ea043; --success-muted:#edfaf1; --text-primary: #1a1d2e; --text-secondary:#6b7280; --text-muted: #9ca3af; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-focus: 0 0 0 3px rgba(79,110,247,.25); /* Spacing */ --radius: 10px; --radius-lg: 16px; --gap: 24px; /* Typography */ --font-ui: 'Inter', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; } /* ── Dark mode tokens ───────────────────────────────────────── Piloté par la classe .dark-mode posée sur par darkmod.js (source de vérité unique pour le dark mode sur le site). ────────────────────────────────────────────────────────────── */ body.dark-mode { --bg: #0f1117; --bg-card: #1a1d2a; --bg-input: #252836; --border: #2e3247; --accent: #6c8aff; --accent-hover: #8aa0ff; --accent-muted: #1e2240; --danger: #f47067; --danger-muted: #2a1a1a; --success: #3fb950; --success-muted:#0d2117; --text-primary: #e8eaf6; --text-secondary:#9aa0c0; --text-muted: #5c627a; --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.4); } .top100-page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } .top100-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .top100-header-icon { font-size: 2rem; } .top100-title { margin: 0; font-size: 1.4rem; } .top100-subtitle { margin: 0.15rem 0 0; opacity: 0.7; font-size: 0.9rem; } .top100-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .top100-pyramid { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .top100-row { display: flex; justify-content: center; gap: 0.6rem; width: 100%; /* Lignes larges (rangs élevés) : défilement horizontal plutôt que cartes illisibles, notamment sur mobile. */ overflow-x: auto; padding-bottom: 0.15rem; } /* ---------- Carte (structure identique aux widgets commerces) ---------- */ .top100-card { position: relative; flex: 0 0 auto; width: 150px; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.12); cursor: pointer; } .top100-img-link { display: block; line-height: 0; } .top100-img { display: block; width: 100%; height: 100px; object-fit: cover; transition: transform .32s ease; } .top100-card:hover .top100-img { transform: scale(1.06); } /* Dégradé sombre derrière les badges pour la lisibilité */ .top100-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 55%); pointer-events: none; } /* ---------- Rang — haut gauche, toujours visible ---------- */ .top100-rank { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; background: rgba(0,0,0,0.55); color: #fff; pointer-events: none; z-index: 2; } .top100-rank.gold { background: #d4af37; color: #fff; } .top100-rank.silver { background: #b0b3b8; color: #fff; } .top100-rank.bronze { background: #a86a3d; color: #fff; } /* ---------- Haut droite : favori (caché au repos) + score ---------- */ .top100-top-right { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: .3rem; z-index: 3; } .top100-favori-btn { order: 1; /* favori à gauche du score */ border: none; background: rgba(0,0,0,.45); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 0.8rem; padding: 0; opacity: 0; transform: translateX(12px) scale(.7); transition: opacity .22s, transform .24s, background .18s, color .18s; } .top100-card:hover .top100-favori-btn, .top100-favori-btn[data-favori="1"] { opacity: 1; transform: translateX(0) scale(1); } .top100-favori-btn[data-favori="1"] { color: #e0245e; } .top100-favori-btn:hover { background: rgba(0,0,0,.65); color: #e0245e; } .top100-score { order: 2; /* score à droite du favori */ background: rgba(0,0,0,.52); border-radius: 20px; padding: 2px 7px; font-size: 0.75rem; font-weight: 600; color: #fff; line-height: 1.5; white-space: nowrap; pointer-events: none; } /* ---------- Bas gauche : nom (repos) ↔ ville (survol) ---------- */ .top100-name { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.52); border-radius: 20px; padding: 2px 8px; font-size: 0.82rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; line-height: 1.5; pointer-events: none; z-index: 2; opacity: 1; transform: translateY(0); transition: opacity .2s, transform .2s; } .top100-card:hover .top100-name { opacity: 0; transform: translateY(4px); } .top100-ville { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.45); border-radius: 20px; padding: 2px 8px; font-size: 0.72rem; color: rgba(255,255,255,.92); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; pointer-events: none; z-index: 2; opacity: 0; transform: translateY(4px); transition: opacity .22s .05s, transform .22s .05s; } .top100-card:hover .top100-ville { opacity: 1; transform: translateY(0); } /* ---------- Responsive ---------- */ /* Rangées profondes (beaucoup de cartes) : on réduit un peu la taille pour limiter le scroll horizontal sur desktop. Les 3 premières lignes (rangs 1-6) restent grandes pour l'effet pyramide visuel. */ @media (min-width: 768px) { .top100-row:nth-child(n+7) .top100-card { width: 130px; } .top100-row:nth-child(n+7) .top100-img { height: 85px; } } @media (max-width: 767px) { .top100-card { width: 120px; } .top100-img { height: 80px; } .top100-header-icon { font-size: 1.6rem; } .top100-title { font-size: 1.15rem; } .top100-name, .top100-ville { font-size: 0.7rem; } .top100-rank { width: 22px; height: 22px; font-size: 0.7rem; } .top100-favori-btn { width: 20px; height: 20px; } }