/* ==========================================================================
   LE CATALOGUE APK
   ==========================================================================
   LA LECON DE LA PREMIERE VERSION : le site a une PHOTO en fond de page. Des
   panneaux a « rgba(255,255,255,.03) » y sont quasiment transparents, et le
   texte se lit alors sur une image chargee — donc il ne se lit pas. Tous les
   blocs posent desormais un fond OPAQUE, sombre et neutre, avec un flou
   derriere : le decor du site reste visible autour, jamais sous les mots.

   Deuxieme lecon : les tons de texte. `--text-dim` et `--text-faint` du site
   sont faits pour des panneaux deja sombres ; sur un fond photo ils passent
   sous le seuil de lisibilite. On garde les variables du site, mais avec des
   valeurs de repli plus claires, et les informations qui comptent — la
   description, les notes de version, l'empreinte — montent d'un cran.

   Les variables locales rassemblent ces choix : les changer ici les change
   partout, au lieu de courir apres trente valeurs eparpillees. */

.apk-page {
  /* Le fond des panneaux : opaque, pas translucide. C'est LA correction. */
  --apk-fond: rgba(15, 18, 24, .93);
  --apk-fond-2: rgba(22, 26, 33, .96);
  --apk-bord: rgba(255, 255, 255, .11);
  --apk-bord-fort: rgba(255, 255, 255, .18);
  --apk-txt: #eef1f4;
  --apk-txt-2: #b9c1cb;      /* corps de texte : plus clair que --text-dim */
  --apk-txt-3: #8a94a1;      /* mentions : plus clair que --text-faint */
  --apk-accent: var(--accent, #ff8a00);
  display: grid; gap: 18px;
}

.apk-flash {
  padding: 12px 15px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  background: rgba(20,54,36,.94); border: 1px solid rgba(61,220,132,.45); color: #7bf0ae;
  backdrop-filter: blur(6px);
}
.apk-flash.is-ko { background: rgba(58,22,26,.94); border-color: rgba(239,68,68,.5); color: #ffb3b8; }

/* ---- L'en-tete ---- */
.apk-hero { align-items: start; }
.apk-hero .jeux-hero-text p { color: var(--apk-txt-2); }
.apk-hero-note {
  margin-top: 11px; padding: 11px 13px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.6;
  background: rgba(52,33,8,.92); border: 1px solid rgba(255,138,0,.38);
  color: #ffcf9a;
}
.apk-hero-note b { color: #ffd9ae; }
.apk-compteurs { display: flex; gap: 20px; }
.apk-compteurs b { display: block; font-size: 22px; font-weight: 900; color: var(--apk-accent); line-height: 1.1; }
.apk-compteurs span { font-size: 11px; color: var(--apk-txt-3); }

/* ---- Les onglets ---- */
.apk-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.apk-onglet {
  padding: 10px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none;
  background: var(--apk-fond); border: 1px solid var(--apk-bord);
  color: var(--apk-txt-2); backdrop-filter: blur(6px);
  transition: border-color .13s, color .13s;
}
.apk-onglet:hover { border-color: var(--apk-bord-fort); color: var(--apk-txt); }
.apk-onglet.is-on {
  border-color: var(--apk-accent); color: #ffd9ae;
  background: linear-gradient(180deg, rgba(255,138,0,.22), rgba(15,18,24,.95));
}

/* ---- Les filtres ---- */
.apk-filtres {
  display: flex; gap: 9px; flex-wrap: wrap; padding: 11px;
  border-radius: 12px; background: var(--apk-fond); border: 1px solid var(--apk-bord);
  backdrop-filter: blur(6px);
}
.apk-filtres input[type="search"] { flex: 1 1 220px; }
.apk-filtres input, .apk-filtres select {
  padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-family: inherit;
  background: rgba(6,8,11,.85); color: var(--apk-txt);
  border: 1px solid var(--apk-bord-fort);
}
.apk-filtres input::placeholder { color: var(--apk-txt-3); }
.apk-filtres input:focus, .apk-filtres select:focus {
  outline: none; border-color: var(--apk-accent);
}

.apk-vide, .apk-rien {
  padding: 26px; border-radius: 12px; text-align: center; font-size: 13.5px;
  color: var(--apk-txt-2);
  background: var(--apk-fond); border: 1px dashed var(--apk-bord-fort);
  backdrop-filter: blur(6px);
}
.apk-vide b { display: block; margin-bottom: 5px; font-size: 15px; color: var(--apk-txt); }
.apk-rien { padding: 16px; }

/* ---- La grille du catalogue ---- */
.apk-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.apk-carte {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-decoration: none;
  border-radius: 14px; background: var(--apk-fond-2);
  border: 1px solid var(--apk-bord);
  transition: border-color .13s, transform .13s, box-shadow .13s;
}
.apk-carte:hover {
  border-color: rgba(255,138,0,.55); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
/* Une fiche en relecture reste visible pour son auteur, mais ne doit pas se
   confondre avec une fiche publiee. On la marque par sa BORDURE et son
   etiquette, jamais en baissant l'opacite : un texte a moitie transparent sur
   un fond photo devient illisible, ce qui punit l'auteur au lieu de l'informer. */
.apk-carte.is-attente { border-color: rgba(255,138,0,.45); border-style: dashed; }
.apk-carte.is-refuse { border-color: rgba(239,68,68,.4); border-style: dashed; }

/* L'IMAGE. Le symbole de repli est POSE EN DESSOUS, et l'image par-dessus :
   si elle ne charge pas, `onerror` la retire et le symbole reapparait tout
   seul. C'est ce qui evite l'icone de vignette cassee du navigateur, qui ne
   dit rien a personne. */
.apk-carte-img {
  position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,138,0,.16), rgba(0,0,0,.5));
  border-bottom: 1px solid var(--apk-bord);
}
.apk-carte-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.apk-carte-vide { font-size: 42px; opacity: .45; }
.apk-etiquette {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  padding: 4px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; font-style: normal; text-transform: uppercase;
  letter-spacing: .06em; background: #ff8a00; color: #12151a;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
.apk-etiquette.is-ko { background: #ef4444; color: #fff; }
.apk-carte-txt { display: grid; gap: 6px; align-content: start; padding: 13px 14px 15px; }
.apk-carte-txt b { font-size: 15px; font-weight: 800; color: var(--apk-txt); line-height: 1.3; }
.apk-carte-txt small { font-size: 11.5px; color: var(--apk-txt-3); }
.apk-carte-txt p {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--apk-txt-2);
  /* Deux lignes maximum : un resume de trois cents caracteres ferait des cartes
     de hauteurs differentes, et la grille perdrait toute sa lisibilite. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.apk-carte-pied {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px;
  padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 11.5px; color: var(--apk-txt-3);
}
.apk-tag {
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(255,138,0,.18); border: 1px solid rgba(255,138,0,.42);
  color: #ffb163;
}

/* ---- La fiche ---- */
.apk-fiche { display: grid; gap: 16px; }
.apk-fiche-tete {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px;
  padding: 18px; border-radius: 16px;
  background: var(--apk-fond); border: 1px solid var(--apk-bord);
  backdrop-filter: blur(8px);
}
@media (max-width: 760px) { .apk-fiche-tete { grid-template-columns: 1fr; } }
.apk-fiche-img {
  position: relative; aspect-ratio: 16 / 10; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,138,0,.16), rgba(0,0,0,.5));
  border: 1px solid var(--apk-bord);
}
.apk-fiche-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apk-fiche-info { display: grid; gap: 11px; align-content: start; }
.apk-fiche-info h1 { margin: 0; font-size: 27px; line-height: 1.15; color: var(--apk-txt); }
.apk-fiche-meta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--apk-txt-2);
}
.apk-fiche-meta b { color: var(--apk-txt); }
.apk-fiche-resume { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--apk-txt-2); }
.apk-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
/* Le bouton de telechargement est l'action principale de la page : il doit se
   voir avant tout le reste, et dire son poids avant qu'on clique. */
.apk-actions .case-open-btn {
  display: inline-flex; gap: 8px; align-items: baseline; text-decoration: none;
  font-size: 15px; padding: 12px 20px;
}
.apk-actions .case-open-btn small { font-size: 12px; opacity: .85; font-weight: 600; }
.apk-suivre { padding: 11px 16px; font-size: 13.5px; }
.apk-suivre.is-on { border-color: var(--apk-accent); color: #ffb163; background: rgba(255,138,0,.14); }

.apk-avis {
  padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  background: rgba(30,35,44,.95); border: 1px solid var(--apk-bord-fort);
  color: var(--apk-txt-2);
}
.apk-avis b { color: var(--apk-txt); }
.apk-avis.is-attente { background: rgba(52,33,8,.95); border-color: rgba(255,138,0,.42); color: #ffcf9a; }
.apk-avis.is-ko { background: rgba(58,22,26,.95); border-color: rgba(239,68,68,.45); color: #ffb3b8; }

.apk-modo {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 8px;
  padding: 12px; border-radius: 11px;
  background: rgba(35,26,62,.95); border: 1px solid rgba(139,110,255,.42);
}
.apk-modo b { font-size: 12.5px; color: #d5c9ff; }
.apk-modo input {
  flex: 1 1 180px; padding: 9px 11px; border-radius: 8px; font-size: 13px; font-family: inherit;
  background: rgba(6,8,11,.85); color: var(--apk-txt); border: 1px solid rgba(139,110,255,.35);
}

.apk-fiche-corps { display: grid; gap: 15px; }
.apk-bloc {
  padding: 17px 19px; border-radius: 14px;
  background: var(--apk-fond); border: 1px solid var(--apk-bord);
  backdrop-filter: blur(8px);
}
.apk-bloc h2 {
  margin: 0 0 13px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--apk-accent);
}
.apk-bloc h2 small { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--apk-txt-3); }
.apk-desc { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--apk-txt); }

/* ---- Les versions ---- */
.apk-version {
  display: grid; gap: 8px; padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.apk-version:first-of-type { border-top: 0; padding-top: 0; }
.apk-version-tete {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--apk-txt-3);
}
.apk-version-tete b { font-size: 16px; font-weight: 800; color: var(--apk-txt); }
.apk-version.is-derniere .apk-version-tete b { color: var(--apk-accent); }
.apk-mini {
  margin-left: auto; padding: 7px 15px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  text-decoration: none; color: var(--apk-txt);
  background: rgba(255,255,255,.08); border: 1px solid var(--apk-bord-fort);
  transition: border-color .12s, color .12s, background .12s;
}
.apk-mini:hover { border-color: var(--apk-accent); color: #ffb163; background: rgba(255,138,0,.12); }
.apk-notes { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--apk-txt-2); }
/* L'EMPREINTE. C'est ce qui permet de verifier ce qu'on installe : elle doit
   etre lisible, pas decorative. Elle se selectionne d'un clic pour etre
   comparee, et deborde en scroll plutot que d'etre coupee. */
.apk-sha {
  display: block; overflow-x: auto; white-space: nowrap; user-select: all; cursor: copy;
  padding: 8px 11px; border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .02em; line-height: 1.5;
  background: rgba(6,8,11,.8); border: 1px solid rgba(255,255,255,.09);
  color: #93a1b0;
}

/* ---- Formulaires ---- */
.apk-form-bloc {
  padding: 20px 22px; border-radius: 14px;
  background: var(--apk-fond); border: 1px solid var(--apk-bord);
  backdrop-filter: blur(8px);
}
.apk-form-bloc h2 { margin: 0 0 14px; font-size: 19px; color: var(--apk-txt); }
.apk-form { display: grid; gap: 14px; }
.apk-form-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.apk-form label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--apk-txt-2); }
.apk-form label small { font-weight: 400; color: var(--apk-txt-3); }
.apk-form input[type="text"], .apk-form textarea, .apk-form select, .apk-form input[type="file"] {
  padding: 10px 12px; border-radius: 9px; font: inherit; font-size: 13.5px;
  background: rgba(6,8,11,.85); color: var(--apk-txt);
  border: 1px solid var(--apk-bord-fort);
}
.apk-form input::placeholder, .apk-form textarea::placeholder { color: var(--apk-txt-3); }
.apk-form input:focus, .apk-form textarea:focus, .apk-form select:focus {
  outline: none; border-color: var(--apk-accent);
}
.apk-form textarea { resize: vertical; line-height: 1.6; }
.apk-form .case-open-btn { justify-self: start; padding: 11px 22px; }
.apk-form-note { font-size: 12px; color: var(--apk-txt-3); line-height: 1.55; }

/* ---- Commentaires ---- */
.apk-comm-form { display: grid; gap: 9px; margin-bottom: 16px; }
.apk-comm-form textarea {
  padding: 11px 13px; border-radius: 10px; font: inherit; font-size: 13.5px; resize: vertical;
  line-height: 1.6; background: rgba(6,8,11,.85); color: var(--apk-txt);
  border: 1px solid var(--apk-bord-fort);
}
.apk-comm-form textarea::placeholder { color: var(--apk-txt-3); }
.apk-comm-form textarea:focus { outline: none; border-color: var(--apk-accent); }
.apk-comm-form .case-open-btn { justify-self: start; }
.apk-comm-err { font-size: 12.5px; color: #ffb3b8; }
.apk-comm-err[hidden] { display: none !important; }
.apk-comms { display: grid; gap: 10px; }
.apk-comm {
  padding: 12px 14px; border-radius: 11px;
  background: rgba(28,33,41,.92); border: 1px solid rgba(255,255,255,.09);
}
.apk-comm-tete { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--apk-txt-3); }
.apk-comm-tete b { font-size: 13.5px; color: var(--apk-txt); }
.apk-comm-x {
  margin-left: auto; padding: 3px 8px; border-radius: 6px; cursor: pointer; font: inherit;
  background: transparent; border: 1px solid var(--apk-bord); color: var(--apk-txt-3);
}
.apk-comm-x:hover { border-color: rgba(239,68,68,.55); color: #ffb3b8; }
.apk-comm p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--apk-txt-2); }