/* ═══════════════════════════════════════════════════════════
   directory.css — annuaire d'apps intégré dans Source.
   Header Source en haut, PAS de footer, page figée à la hauteur
   de l'écran : seules la sidebar (filtres) et la grille défilent.
   Tout est scopé sous .amg-directory ; ancré à 16px (Source: 62.5%).
   ═══════════════════════════════════════════════════════════ */

/* ── Pas de footer sur l'annuaire (via body.amg-fixed-page) ── */
body.amg-fixed-page .gh-footer { display: none !important; }

.amg-directory {
  --content-max: 1366px;
  --accent: #007AFF;
  --gold: linear-gradient(to right, #a67c00, #d4af37 50%, #a67c00);
  --gold-solid: #d4af37;
  --bg: #1a1a1a;
  --bg-card: #262626;
  --bg-input: #262626;
  --text: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  --border: #333333;
  --border-mid: #333333;
  --border-strong: #444444;
  font-size: 16px;
  color: var(--text);
  /* Fond transparent : le gris ne couvre que le bloc central (sidebar + grille,
     borné à --content-max) → blanc de la page sur les côtés, comme la landing. */
  background: transparent;
}
.amg-directory *, .amg-directory *::before, .amg-directory *::after { box-sizing: border-box; }

/* ── Overlay + drawer (mobile) ── */
.amg-directory #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; }
.amg-directory #filters-overlay.open { opacity: 1; pointer-events: auto; }
.amg-directory #filters-drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: 300px;
  transform: translateX(-100%); transition: transform 0.28s ease; pointer-events: none;
  background: #000; border-right: 1px solid var(--border); z-index: 51;
  padding: 1em 1.5em 2em; display: flex; flex-direction: column; gap: 1.5em;
  overflow-y: auto; scrollbar-width: none;
  --text: #fff; --text-secondary: #ccc; --text-muted: #888; --bg-input: #1a1a1a;
  --border: #222; --border-mid: #222; --border-strong: #333;
}
.amg-directory #filters-drawer::-webkit-scrollbar { display: none; }
.amg-directory #filters-drawer.open { transform: translateX(0); pointer-events: auto; }
.amg-directory .filters-drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75em; border-bottom: 1px solid var(--border); }
.amg-directory .filters-drawer-title { color: var(--text-muted); font-size: 0.75em; letter-spacing: 0.08em; text-transform: uppercase; }
.amg-directory .filters-drawer-close { background: none; border: none; color: var(--text-secondary); font-size: 1em; cursor: pointer; }

/* ── Filtres (partagé drawer + sidebar) ── */
.amg-directory .filters-inner { display: flex; flex-direction: column; gap: 1.5em; }
.amg-directory .filter-group { display: flex; flex-direction: column; gap: 0.4em; }
.amg-directory .filter-label { color: var(--text-muted); font-size: 0.7em; text-transform: uppercase; letter-spacing: 1px; }
.amg-directory .filter-collapse-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.5em 0.75em; background: var(--bg-input); border: 1px solid var(--border-mid); border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.amg-directory .filter-collapse-toggle:hover { border-color: var(--border-strong); }
.amg-directory .filter-collapse-caret { color: var(--text-muted); transition: transform 0.18s ease; flex-shrink: 0; }
.amg-directory .filter-collapse-toggle[aria-expanded="false"] .filter-collapse-caret { transform: rotate(-90deg); }
.amg-directory .category-list.is-collapsed { display: none; }
.amg-directory .filters-inner select { background: var(--bg-input); border: 1px solid var(--border-mid); color: var(--text-secondary); padding: 0.5em 0.75em; border-radius: 8px; width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; font: inherit; }
.amg-directory .filters-inner select:hover { border-color: var(--border-strong); color: var(--text); }
.amg-directory .filters-inner select:focus { border-color: var(--gold-solid); outline: none; }

.amg-directory .category-list { display: flex; flex-direction: column; gap: 0.1em; }
.amg-directory .category-option { display: flex; align-items: center; gap: 0.5em; padding: 0.35em 0.4em; border-radius: 6px; color: var(--text-secondary); font-size: 0.85em; cursor: pointer; }
.amg-directory .category-option:hover { background: var(--bg-input); color: var(--text); }
.amg-directory .category-option input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--gold-solid); cursor: pointer; flex-shrink: 0; }
.amg-directory .category-option--featured { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

.amg-directory .filter-reset-wrap { padding-top: 0.75em; border-top: 1px solid var(--border); }
.amg-directory .filters-reset-btn { width: 100%; border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary); border-radius: 10px; padding: 0.7em 0.9em; font-size: 0.8em; font-weight: 600; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.amg-directory .filters-reset-btn:hover { background: var(--bg-input); color: var(--text); border-color: var(--text-muted); }

/* ── Segmented controls ── */
.amg-directory .segmented { display: flex; gap: 2px; padding: 2px; background: var(--bg-input); border: 1px solid var(--border-mid); border-radius: 8px; }
.amg-directory .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; }
.amg-directory .segmented-option:hover { color: var(--text); }
.amg-directory .segmented-option.is-active { background: var(--gold); color: #1a1206; }
.amg-directory .segmented--icons .segmented-option { display: flex; align-items: center; justify-content: center; padding: 8px; }
.amg-directory .segmented--icons .segmented-option svg { width: 20px; height: 20px; display: block; }

/* ── Layout : défilement normal de la page, sidebar collante ── */
.amg-directory .desktop-layout { display: block; }
.amg-directory .desktop-sidebar { display: none; }
.amg-directory .desktop-main {
  display: flex; flex-direction: column; min-height: 100vh; background: var(--bg);
  --text: #fff; --text-secondary: #ccc; --text-muted: #999; --bg: #1a1a1a;
  --bg-input: #262626; --bg-card: #262626; --border: #333; --border-mid: #333; --border-strong: #444;
}
.amg-directory .searchbar-row { display: flex; align-items: center; gap: 0.75em; padding: 0.75em 1em; border-bottom: 1px solid var(--border-mid); background: var(--bg); position: sticky; top: 0; z-index: 6; }
.amg-directory .hamburger-btn { background: none; border: none; color: var(--text); width: 38px; height: 38px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.amg-directory .search-input-wrap { position: relative; flex: 1; }
.amg-directory .search-input { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 0.5em 2.2em 0.5em 1em; border-radius: 8px; width: 100%; font-size: 0.9em; outline: none; }
.amg-directory .search-input::placeholder { color: var(--text-muted); }
.amg-directory .search-clear { display: none; position: absolute; right: 0.6em; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); font-size: 1.75em; cursor: pointer; line-height: 1; }

/* flex:1 0 auto (reste un bloc à l'intérieur → Isotope OK) : grandit pour remplir
   l'espace disponible et pousser la barre du bas tout en bas de l'écran, sans
   jamais rogner la grille quand il y a beaucoup d'apps. */
.amg-directory .main-scroll { flex: 1 0 auto; }

/* ── Grille (Isotope) ── */
.amg-directory .grid { display: block; padding: 0.5em; margin-left: auto; margin-right: auto; }
.amg-directory .grid > .app-wrap { display: inline-block; text-align: left; vertical-align: top; margin: 6px 4px; width: calc((100% - 24px) / 3); }
.amg-directory #apps-grid:not(.grid-ready) .app-card { opacity: 0; }
.amg-directory #apps-grid.grid-ready .app-card { opacity: 1; }

.amg-directory .app-wrap, .amg-directory .app-wrap:visited, .amg-directory .app-wrap:hover, .amg-directory .app-wrap:active { color: inherit; text-decoration: none; }
.amg-directory .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) { .amg-directory .app-card { transition: transform 0.2s ease; } .amg-directory .app-card:hover { transform: scale(1.06); } }
.amg-directory .app-icon-wrap { position: relative; display: inline-flex; }
.amg-directory .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; }
.amg-directory .app-icon { width: 80px; height: 80px; border-radius: 22%; object-fit: cover; flex-shrink: 0; }
.amg-directory .app-icon-placeholder { width: 80px; height: 80px; border-radius: 22%; background: var(--bg-input); flex-shrink: 0; }
.amg-directory .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; }
.amg-directory .app-rating-row { display: flex; justify-content: center; }
.amg-directory .app-rating { font-size: 10px; color: #f5a623; }
.amg-directory .app-rating--empty { color: #444; }

.amg-directory .no-results { display: none; text-align: center; padding: 4em 1em; color: var(--text-muted); }

/* ── Barre du bas (compteur + slider) — collée en bas de l'écran pendant le scroll ── */
.amg-directory .grid-footer { position: sticky; bottom: 0; z-index: 4; background: var(--bg); border-top: 1px solid var(--border); padding: 0.6em 1em; display: flex; justify-content: center; align-items: center; }
.amg-directory .grid-footer-count { color: var(--text-muted); font-size: 0.8em; }
.amg-directory .grid-footer-count strong { color: var(--text); }
.amg-directory .grid-footer-size { position: absolute; right: 1em; display: flex; align-items: center; gap: 0.4em; color: var(--text-muted); }
.amg-directory .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; }
.amg-directory .grid-footer-size input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #007AFF; cursor: pointer; }
.amg-directory .grid-footer-size input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #007AFF; border: none; cursor: pointer; }

/* ── Desktop (≥768px) : sidebar (filtres) qui défile indépendamment ── */
@media (min-width: 768px) {
  .amg-directory .hamburger-btn { display: none; }
  .amg-directory .desktop-layout { display: flex; width: 100%; max-width: var(--content-max); margin-inline: auto; align-items: flex-start; }
  .amg-directory .desktop-sidebar {
    display: flex; flex-direction: column; width: 260px; flex-shrink: 0;
    padding: 1.5em 1.25em; border-right: 1px solid var(--border);
    position: sticky; top: 0; max-height: 100vh; overflow-y: auto; scrollbar-width: none;
    background: #000; --text: #fff; --text-secondary: #ccc; --text-muted: #888;
    --bg-input: #1a1a1a; --border: #222; --border-mid: #222; --border-strong: #333;
  }
  .amg-directory .desktop-sidebar::-webkit-scrollbar { display: none; }
  .amg-directory .desktop-main { flex: 1; min-width: 0; }
  .amg-directory .grid { padding: 1em; }
  .amg-directory .grid > .app-wrap { width: 110px; }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
  .amg-directory .grid-footer-size { display: none; }
  .amg-directory .search-input { font-size: 16px; }
  .amg-directory .app-icon, .amg-directory .app-icon-placeholder {
    width: calc((100vw - 1em) / 3 - 16px); height: auto; aspect-ratio: 1 / 1;
  }
}

/* ── Spinner de chargement (même que la landing), centré dans la grille ── */
.amg-directory .amg-dir-loading { display: flex; justify-content: center; align-items: center; width: 100%; min-height: calc(100vh - 180px); }
.amg-directory .amg-spinner { width: 42px; height: 42px; border: 3px solid rgba(255,255,255,0.18); border-top-color: var(--gold-solid); border-radius: 50%; animation: amg-spin 0.8s linear infinite; }
@keyframes amg-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   Modal fiche app (par-dessus l'annuaire, fond flouté)
   Reprend le design de app-detail-premium. Unités en em (base 16px).
   ═══════════════════════════════════════════════════════════ */
.amg-directory .app-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,8,10,0.62); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); animation: dv-fade 0.22s ease both; }
.amg-directory .app-modal-overlay[hidden] { display: none; }
.amg-directory .app-modal-card { position: relative; width: 100%; max-width: 760px; max-height: 88vh; overflow: hidden; background: #121214; border: 1px solid #2a2a2e; border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,0.65); animation: dv-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dv-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
/* Animation de fermeture (symétrique de l'ouverture) */
.amg-directory .app-modal-overlay.is-closing { animation: dv-fade-out 0.2s ease forwards; }
.amg-directory .app-modal-overlay.is-closing .app-modal-card { animation: dv-pop-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes dv-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dv-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px) scale(0.97); } }
.amg-directory .app-modal-close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(30,30,34,0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-size: 15px; cursor: pointer; transition: background 0.15s; }
.amg-directory .app-modal-close:hover { background: rgba(60,60,66,0.95); }

.amg-directory .app-modal-content { color: #fff; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a3a3e transparent; border-radius: 20px; }
.amg-directory .app-modal-content::-webkit-scrollbar { width: 8px; }
.amg-directory .app-modal-content::-webkit-scrollbar-thumb { background: #3a3a3e; border-radius: 8px; }
.amg-directory .dv-hero { display: flex; gap: 1.5em; align-items: center; padding: 2.4em 2em 1.8em; background: radial-gradient(ellipse at 60% 0%, rgba(0,122,255,0.14) 0%, transparent 70%), #0f0f11; border-bottom: 1px solid #2a2a2e; border-radius: 20px 20px 0 0; }
.amg-directory .dv-icon { width: 96px; height: 96px; border-radius: 22px; object-fit: cover; box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); flex-shrink: 0; }
.amg-directory .dv-icon-ph { background: #2a2a2e; }
.amg-directory .dv-info { flex: 1; min-width: 0; }
.amg-directory .dv-badges { display: flex; gap: 0.5em; margin-bottom: 0.6em; flex-wrap: wrap; }
.amg-directory .dv-badge-featured { background: rgba(0,122,255,0.15); color: #4c9aff; border: 1px solid rgba(0,122,255,0.35); padding: 3px 10px; border-radius: 20px; font-size: 0.72em; font-weight: 600; }
.amg-directory .dv-badge-sponsored { background: rgba(255,184,0,0.12); color: #FFB800; border: 1px solid rgba(255,184,0,0.3); padding: 3px 10px; border-radius: 20px; font-size: 0.72em; font-weight: 600; }
.amg-directory .dv-name { font-size: 1.8em; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.35em; }
.amg-directory .dv-dev { color: #aaa; font-size: 0.9em; margin-bottom: 0.85em; }
.amg-directory .dv-meta { display: flex; gap: 0.5em; flex-wrap: wrap; }
.amg-directory .dv-pill { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 20px; font-size: 0.78em; color: #aaa; }
.amg-directory .dv-pill.dv-rating { color: #f5a623; }
.amg-directory .dv-pill.dv-price { color: #fff; background: rgba(255,255,255,0.1); }
.amg-directory .dv-cta { display: flex; gap: 0.75em; flex-wrap: wrap; padding: 1.5em 2em; }
.amg-directory .dv-btn { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; padding: 0.75em 1.5em; border-radius: 12px; font-size: 0.9em; font-weight: 600; color: #fff; transition: opacity 0.15s, transform 0.15s; }
.amg-directory .dv-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.amg-directory .dv-btn-appstore { background: #007AFF; box-shadow: 0 4px 20px rgba(0,122,255,0.35); }
.amg-directory .dv-btn-playstore { background: #1db954; box-shadow: 0 4px 20px rgba(29,185,84,0.3); }
.amg-directory .dv-btn-website { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }
.amg-directory .dv-shots { position: relative; padding: 0 2em 1.5em; }
.amg-directory .dv-shots .swiper-slide { width: auto; height: auto; }
.amg-directory .dv-shot { height: 340px; width: auto; border-radius: 14px; display: block; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.amg-directory .dv-shots .swiper-button-prev, .amg-directory .dv-shots .swiper-button-next { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; margin-top: -22px; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.amg-directory .dv-shots .swiper-button-prev::after, .amg-directory .dv-shots .swiper-button-next::after { display: none !important; }
.amg-directory .dv-shots .amg-chevron { width: 28px; height: 28px; display: block; }
.amg-directory .dv-shots .swiper-button-prev { left: 2em; }
.amg-directory .dv-shots .swiper-button-next { right: 2em; }
.amg-directory .dv-shots .swiper-button-prev:hover, .amg-directory .dv-shots .swiper-button-next:hover { background: rgba(0,0,0,0.75); }
.amg-directory .dv-section { padding: 0 2em; }
.amg-directory .dv-section:last-child { padding-bottom: 2em; }
.amg-directory .dv-label { color: #777; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 1.5em 0 0.6em; }
.amg-directory .dv-desc { color: #bbb; line-height: 1.7; font-size: 0.92em; white-space: pre-line; margin: 0; }
.amg-directory .dv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #2a2a2e; border-radius: 14px; overflow: hidden; }
.amg-directory .dv-cell { background: #1a1a1c; padding: 1em 1.15em; }
.amg-directory .dv-cell-l { color: #888; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25em; }
.amg-directory .dv-cell-v { color: #fff; font-size: 0.9em; font-weight: 500; }
@media (max-width: 600px) {
  .amg-directory .app-modal-overlay { padding: 0; }
  .amg-directory .app-modal-card { max-height: 100vh; border-radius: 0; }
  .amg-directory .dv-hero { flex-direction: column; align-items: flex-start; padding: 2em 1.25em 1.5em; border-radius: 0; }
  .amg-directory .dv-cta, .amg-directory .dv-section { padding-left: 1.25em; padding-right: 1.25em; }
  .amg-directory .dv-shots { padding-left: 1.25em; padding-right: 1.25em; }
  .amg-directory .dv-shot { height: 200px; }
  .amg-directory .dv-name { font-size: 1.4em; }
}