/* ── Message de première visite (modale) ── */ .welcome-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .welcome-overlay[hidden] { display: none; } /* Déjà vue : masquée avant le premier rendu (classe posée sur par le script inline du head de apps.ejs) — aucun flash. */ html.welcome-off .welcome-overlay { display: none; } .welcome-modal { position: relative; width: 100%; max-width: 420px; background: #262626; color: #ffffff; border: 1px solid #333333; border-radius: 16px; padding: 1.75rem 1.5rem 1.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); text-align: center; } .welcome-close { position: absolute; top: 0.75rem; right: 0.9rem; background: none; border: none; color: #888888; font-size: 1.1rem; line-height: 1; cursor: pointer; } .welcome-close:hover { color: #ffffff; } .welcome-title { margin: 0 0 0.6rem; font-size: 1.25rem; font-weight: 700; } .welcome-text { margin: 0 0 1.4rem; font-size: 0.9rem; line-height: 1.5; color: #cccccc; } .welcome-btn { border: none; background: linear-gradient(135deg, #007AFF, #0055D4); color: #ffffff; border-radius: 10px; padding: 0.65rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; } .welcome-btn:hover { filter: brightness(1.08); } /* ── Filters Drawer ── */ #filters-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 50; transition: opacity 0.28s ease; opacity: 0; pointer-events: none; } #filters-overlay.open { opacity: 1; pointer-events: auto; } #filters-drawer { position: fixed; top: 0; left: 0; height: 100%; width: 300px; transform: translateX(-100%); transition: transform 0.28s ease; pointer-events: none; background: var(--bg-card); border-right: 1px solid var(--border); z-index: 51; padding: 1rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; scrollbar-width: none; /* Firefox : masque l'ascenseur */ -ms-overflow-style: none; /* Edge/IE anciens */ } #filters-drawer::-webkit-scrollbar { display: none; } /* Safari / Chrome */ #filters-drawer.open { transform: translateX(0); pointer-events: auto; } /* ── Filters shared styles ── */ .filters-inner { display: flex; flex-direction: column; gap: 1.5rem; } .filter-group { display: flex; flex-direction: column; gap: 0.4rem; } .filter-label { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; } /* En-tête repliable (ex. Category) */ .filter-collapse-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border-mid); border-radius: 8px; cursor: pointer; font: inherit; } .filter-collapse-toggle:hover { border-color: var(--border-strong); } .filter-collapse-caret { color: var(--text-muted); transition: transform 0.18s ease; flex-shrink: 0; } .filter-collapse-toggle[aria-expanded="false"] .filter-collapse-caret { transform: rotate(-90deg); } .category-list.is-collapsed { display: none; } .filter-group--inline { flex-direction: row; align-items: center; justify-content: space-between; } .filter-group--inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold-solid); cursor: pointer; } .filters-inner select { background: var(--bg-input); border: 1px solid var(--border-mid); color: var(--text-secondary); padding: 0.5rem 0.75rem; border-radius: 8px; width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; } .filters-inner select:hover { border-color: var(--border-strong); color: var(--text); } .filters-inner select:focus, .filters-inner select:focus-visible { border-color: var(--gold-solid); outline: none; } /* ── Category (liste de cases à cocher, toujours visible) ── */ .category-list { display: flex; flex-direction: column; gap: 0.1rem; } .category-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 6px; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; } .category-option:hover { background: var(--bg-input); color: var(--text); } .category-option input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--gold-solid); cursor: pointer; flex-shrink: 0; } /* ── Filters Drawer header ── */ .filters-drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .filters-drawer-title { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .filters-drawer-close { background: none; border: none; color: var(--text-secondary); font-size: 1rem; cursor: pointer; } /* ── Search bar row ── */ .searchbar-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-mid); background: var(--bg); flex-shrink: 0; position: sticky; top: 0; z-index: 5; } .hamburger-btn { background: none; border: none; color: var(--text); width: 38px; height: 38px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; padding: 0; } .hamburger-btn span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; } /* ── Search input ── */ .search-input-wrap { position: relative; flex: 1; } .search-input { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 0.5rem 2.2rem 0.5rem 1rem; border-radius: 8px; width: 100%; font-size: 0.9rem; box-sizing: border-box; outline: none; } .search-input::placeholder { color: var(--text-muted); } .search-clear { display: none; position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); font-size: 1.75rem; cursor: pointer; line-height: 1; } /* ── Mobile layout ── */ .desktop-layout { display: block; } .desktop-sidebar { display: none; } .desktop-main { display: block; } .main-scroll { display: block; } /* ── Grid (Isotope) ── */ .grid { display: block; padding: 0.5rem; margin-left: auto; margin-right: auto; } .grid > .app-wrap { display: inline-block; text-align: left; vertical-align: top; margin: 6px 4px; width: calc((100% - 24px) / 3); } /* Les cards restent masquées tant que filters.js n'a pas révélé la grille (.grid-ready) : immédiat sans filtre actif, après le premier filtrage sinon (anti-flash de la liste complète au retour arrière avec un filtre actif). Aucune animation d'entrée — apparition instantanée. */ #apps-grid:not(.grid-ready) .app-card { opacity: 0; } #apps-grid.grid-ready .app-card { opacity: 1; } .filter-reset-wrap { padding-top: 0.75rem; border-top: 1px solid var(--border); } .filters-reset-btn { width: 100%; border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary); border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .filters-reset-btn:hover { background: var(--bg-input); color: var(--text); border-color: var(--text-muted); } @media (min-width: 768px) { .grid > .app-wrap { width: 110px; } } /* ── Les cards sont des : neutralise les styles de lien du navigateur (bleu/violet visited, soulignement) — les couleurs viennent des classes ── */ .app-wrap, .app-wrap:visited, .app-wrap:hover, .app-wrap:active { color: inherit; text-decoration: none; } /* ── App card ── */ .app-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; background: transparent; border: none; cursor: pointer; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .app-card { transition: transform 0.2s ease; } .app-card:hover { transform: scale(1.06); } } .app-icon-wrap { position: relative; display: inline-flex; } /* ── Featured badge ── */ .featured-badge { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; background: linear-gradient(135deg, #007AFF, #0055D4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; box-shadow: 0 2px 6px rgba(0,122,255,0.5); z-index: 2; } /* ── App icon ── */ .app-icon { width: 80px; height: 80px; border-radius: 22%; object-fit: cover; flex-shrink: 0; } .app-icon-placeholder { width: 80px; height: 80px; border-radius: 22%; background: var(--bg-input); flex-shrink: 0; } /* ── App text ── */ .app-name { font-size: 11px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.3; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .app-rating-row { display: flex; justify-content: center; } .app-rating { font-size: 10px; color: #f5a623; } .app-rating--empty { color: #444; } /* ── Grid footer ── */ .grid-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 0.6rem 1rem; display: flex; justify-content: center; align-items: center; position: relative; } .grid-footer-count { color: var(--text-muted); font-size: 0.8rem; } .grid-footer-count strong { color: var(--text); } /* ── No results ── */ .no-results { display: none; text-align: center; padding: 4rem 1rem; color: var(--text-muted); } /* ── Desktop (≥768px) ── */ @media (min-width: 768px) { body.layout-fixed { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } .hamburger-btn { display: none; } .searchbar-row { position: static; } .desktop-layout { display: flex; flex: 1; min-height: 0; width: 100%; max-width: var(--content-max); margin-inline: auto; } .desktop-sidebar { display: flex; flex-direction: column; width: 260px; flex-shrink: 0; padding: 1.5rem 1.25rem; border-right: 1px solid var(--border); min-height: 0; overflow-y: auto; scrollbar-width: none; } .desktop-sidebar::-webkit-scrollbar { display: none; } .desktop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .main-scroll { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; } .main-scroll::-webkit-scrollbar { display: none; } .grid { padding: 1rem; } } /* ── App card light mode ── */ @media (prefers-color-scheme: light) { .app-rating--empty { color: #bbb; } } /* ── Footer size slider ── */ .grid-footer-size { position: absolute; right: 1rem; display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); } .grid-footer-size input[type="range"] { -webkit-appearance: none; appearance: none; width: 80px; height: 3px; background: var(--border-strong); border-radius: 2px; outline: none; cursor: pointer; } .grid-footer-size input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #007AFF; cursor: pointer; } .grid-footer-size input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #007AFF; border: none; cursor: pointer; } /* ═══════════════════════════════════════════════════════════ Thème sombre forcé de la page apps Sidebar en noir, zone grille en gris foncé, texte clair. ═══════════════════════════════════════════════════════════ */ /* Colonne de gauche : noir */ .desktop-sidebar { background: #000000; --text: #ffffff; --text-secondary: #cccccc; --text-muted: #888888; --bg-input: #1a1a1a; --border: #222222; --border-mid: #222222; --border-strong: #333333; } /* Zone principale (recherche + grille + footer) : gris foncé */ .desktop-main { background: #1a1a1a; --text: #ffffff; --text-secondary: #cccccc; --text-muted: #999999; --bg: #1a1a1a; --bg-input: #262626; --bg-card: #262626; --border: #333333; --border-mid: #333333; --border-strong: #444444; } .category-option--featured { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* ═══════════════════════════════════════════════════════════ Segmented control (All | iOS | Android). À coller dans apps.css. Utilisé pour le filtre Platform ; réutilisable via [data-segmented]. ═══════════════════════════════════════════════════════════ */ .segmented { display: flex; gap: 2px; padding: 2px; background: var(--bg-input); border: 1px solid var(--border-mid); border-radius: 8px; } .segmented-option { flex: 1 1 0; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .segmented-option:hover { color: var(--text); } .segmented-option.is-active { background: var(--gold); color: #1a1206; } /* Focus clavier visible (accessibilité) */ .segmented-option:focus-visible { outline: 2px solid var(--gold-solid); outline-offset: 2px; } /* ── Variante à icônes (ex. Device : téléphone / tablette) ── */ .segmented--icons .segmented-option { display: flex; align-items: center; justify-content: center; padding: 8px; } .segmented--icons .segmented-option svg { width: 20px; height: 20px; display: block; } /* ── Bottom bar visible sur mobile aussi ── Barre fixe en bas du layout figé (flex-shrink:0 = ne se comprime pas, reste sous la zone scrollable .main-scroll). Le slider de taille est masqué sur mobile (inutile) : on garde seulement le compteur d'apps, centré. La taille des icônes est calculée d'après l'écran (voir fitGridItems). ── */ @media (max-width: 767px) { .grid-footer { display: flex; flex-shrink: 0; } .grid-footer-size { display: none; } } /* ── Layout figé sur mobile : header en haut, seule la grille scrolle ── Même principe que le desktop (body.layout-fixed en flex-column plein écran, .main-scroll en overflow interne), mais sans la sidebar (filtres = drawer). Hauteur calée sur le viewport RÉEL via dvh, pour que le bas de la grille ne passe pas sous la barre d'URL du navigateur mobile. ── */ @media (max-width: 767px) { body.layout-fixed { height: 100vh; /* fallback pour les navigateurs sans dvh */ height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } .desktop-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; } .desktop-main { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Plus de sticky : la searchbar est un simple bandeau fixe au-dessus de la zone scrollable (c'est .main-scroll qui scrolle, plus la page). */ .searchbar-row { position: static; flex-shrink: 0; } /* iOS zoome sur un champ dont la police < 16px : on force 16px pour empêcher le zoom automatique au focus de la recherche. */ .search-input { font-size: 16px; } .main-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* inertie de scroll iOS */ scrollbar-width: none; -ms-overflow-style: none; } .main-scroll::-webkit-scrollbar { display: none; } /* ── Taille d'icône pré-calculée en CSS (anti-CLS) ── Reproduit le calcul de fitGridItems (filters.js) : 3 colonnes, grille pad 0.5rem×2 = 1rem, marges d'item 8px, padding de card 8px → icône = (100vw - 1rem)/3 - 16px. Sans ça, les icônes étaient peintes à 80px (valeur desktop) puis gonflées par le JS → layout shift mesuré par Lighthouse. Le JS ne fait plus qu'arrondir au pixel (écart ≤ 1px). ── */ .app-icon, .app-icon-placeholder { width: calc((100vw - 1rem) / 3 - 16px); height: auto; aspect-ratio: 1 / 1; } }