/* creators.kornuxindustries.com — feuille de style unique.
   Sombre + rouge, dans l'esprit de la vitrine, mais SANS rien lui emprunter :
   les deux sites sont independants, aucun fichier partage. */

:root {
  --fond:        #0c0c0e;
  --fond-carte:  #16161a;
  --bord:        #26262c;
  --texte:       #e8e8ea;
  --texte-faible:#9a9aa4;
  --rouge:       #b3261e;
  --rouge-clair: #e0453c;
  --vert:        #2e7d32;
  --rayon:       10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--rouge-clair); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------- entete --------------------------------- */
.entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px;
  border-bottom: 1px solid var(--bord);
  background: #0a0a0c;
  position: sticky; top: 0; z-index: 10;
}
.marque { font-weight: 700; font-size: 18px; color: var(--texte); }
.entete nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.entete nav a { color: var(--texte-faible); }
.entete nav a:hover { color: var(--texte); }
.moi { color: var(--texte-faible); font-size: 14px; }
/* Badge du role en cours : on doit voir d'un coup d'oeil de quel cote on est. */
.role {
  border: 1px solid var(--rouge); border-radius: 999px;
  padding: 2px 10px; font-size: 13px; color: var(--rouge-clair);
}
.role:hover { background: var(--rouge); color: #fff; text-decoration: none; }
.lang { border: 1px solid var(--bord); border-radius: 6px; padding: 1px 6px; font-size: 12px; }

main { max-width: 980px; margin: 0 auto; padding: 26px 20px 60px; }
footer { border-top: 1px solid var(--bord); padding: 20px; text-align: center; color: var(--texte-faible); }

h1 { font-size: 28px; margin: 0 0 10px; }
h2 { font-size: 20px; margin: 34px 0 10px; }
h3 { font-size: 17px; margin: 0 0 6px; }
section { margin-bottom: 12px; }
.etroit { max-width: 480px; margin: 0 auto; }
.petit-texte { color: var(--texte-faible); font-size: 14px; }

/* ------------------------------- boutons -------------------------------- */
.bouton {
  display: inline-block; background: var(--rouge); color: #fff;
  border: 0; border-radius: var(--rayon); padding: 11px 18px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.bouton:hover { background: var(--rouge-clair); text-decoration: none; }
.bouton.petit { padding: 7px 12px; font-size: 14px; }
.bouton.vert  { background: var(--vert); }
/* Bouton secondaire : present, cliquable, mais qui ne vole pas la vedette a
   l'action principale de la carte. */
.bouton.sombre { background: #24242b; color: var(--texte); border: 1px solid var(--bord); }
.bouton.sombre:hover { border-color: var(--rouge); background: #2c2c34; }
.ligne-repu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bouton.rouge { background: #7a1a15; }
.lien-bouton {
  background: none; border: 0; color: var(--texte-faible);
  font: inherit; cursor: pointer; padding: 6px 0; text-decoration: underline;
}
.lien-bouton:hover { color: var(--rouge-clair); }

/* ------------------------------ formulaires ----------------------------- */
.formulaire { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--texte-faible); }
input, select, textarea {
  background: #101014; color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px;
  padding: 9px 11px; font: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rouge); border-color: transparent; }
.formulaire .bouton { align-self: flex-start; }
.en-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.en-ligne input { width: auto; flex: 1 1 220px; }

/* -------------------------------- hero ---------------------------------- */
.hero {
  background: linear-gradient(180deg, #1a0f0f, var(--fond-carte));
  border: 1px solid var(--bord); border-radius: 14px;
  padding: 34px 26px; margin-bottom: 26px;
}
.hero h1 { font-size: 32px; }
.hero p { color: var(--texte-faible); max-width: 640px; }

/* ----------------------------- liste de jeux ---------------------------- */
.grille {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.carte-jeu {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden; color: var(--texte);
  transition: transform .15s, border-color .15s;
}
.carte-jeu:hover { transform: translateY(-3px); border-color: var(--rouge); text-decoration: none; }
.carte-jeu img, .sans-image { width: 100%; aspect-ratio: 460/215; object-fit: cover; display: block; background: #1f1f25; }
.carte-jeu .corps { padding: 12px 14px; }

/* --------------------------- fiche d'un jeu ----------------------------- */
.fiche .banniere { width: 100%; max-width: 460px; border-radius: var(--rayon); display: block; margin-bottom: 14px; }

/* ------------------------------ demandes -------------------------------- */
.demande {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px 18px; margin-bottom: 14px;
}
.demande { position: relative; }
/* Croix d'effacement d'un refus : discrete, en haut a droite de la carte. */
.croix { position: absolute; top: 10px; right: 12px; margin: 0; }
.lien-croix {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 18px;
  line-height: 1; color: var(--texte-faible); padding: 2px 4px;
}
.lien-croix:hover { color: var(--rouge-clair); }

.titre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.titre-ligne h2 { margin: 34px 0 10px; }
/* Deux onglets colles dans un meme cadre : on voit d'un coup les deux choix
   et lequel est actif. */
.onglets { display: inline-flex; border: 1px solid var(--bord); border-radius: 999px; overflow: hidden; }
.filtre {
  font-size: 14px; padding: 5px 14px; color: var(--texte-faible);
  border-right: 1px solid var(--bord);
}
.filtre:last-child { border-right: 0; }
.filtre:hover { color: var(--texte); text-decoration: none; }
.filtre.actif { background: var(--rouge); color: #fff; }

.demande blockquote {
  margin: 10px 0; padding-left: 12px;
  border-left: 3px solid var(--bord); color: var(--texte-faible);
}
.cle code {
  background: #000; border: 1px dashed var(--rouge);
  padding: 4px 10px; border-radius: 6px; letter-spacing: 1px;
}

/* --- reputation : le seul systeme de moderation du site, il doit se voir - */
.repu { display: inline-flex; gap: 10px; align-items: baseline; font-size: 14px; }
.repu .taux { font-size: 20px; }
.repu .bon    { color: #6fbf73; }
.repu .moyen  { color: #e8b73a; }
.repu .faible { color: var(--rouge-clair); }
.repu.neutre { color: var(--texte-faible); font-weight: 400; }

/* Historique public d'un createur : les faits, en clair. */
.historique { width: 100%; border-collapse: collapse; margin-top: 10px; }
.historique th {
  text-align: left; font-size: 13px; color: var(--texte-faible);
  font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--bord);
}
.historique td { padding: 9px 10px; border-bottom: 1px solid var(--bord); }
.historique .manquant { color: var(--rouge-clair); }

/* ------------------------------- divers --------------------------------- */
.liste { list-style: none; padding: 0; margin: 0; }
.ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--bord);
}
.etiquette { color: #e8b73a; }
.info {
  background: #1d1512; border: 1px solid #4a2a20;
  border-radius: 8px; padding: 10px 14px; margin: 0 0 18px;
}
.roles { display: grid; gap: 14px; margin-top: 18px; }
.carte-role {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--fond-carte); color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 18px; font: inherit; cursor: pointer;
}
.carte-role:hover { border-color: var(--rouge); }
.carte-role.actuel { border-color: var(--rouge); background: #1d1214; }
.carte-role b { font-size: 17px; }
.carte-role span { color: var(--texte-faible); font-size: 14px; }
.verifiee { font-size: 18px; color: #6fbf73; margin: 0 0 4px; }
.verifiee .petit-texte { color: var(--texte-faible); }

/* Pages legales : du texte long, il doit rester confortable a lire. */
.texte { max-width: 720px; margin: 0 auto; }
.texte h2 { font-size: 18px; margin-top: 28px; }
.texte ul { padding-left: 20px; }
.texte li { margin-bottom: 8px; }
.texte code { background: #101014; padding: 1px 6px; border-radius: 4px; font-size: 14px; }
footer { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
footer a { color: var(--texte-faible); font-size: 14px; }
footer a:hover { color: var(--rouge-clair); }

/* Accueil : le nom de l app en h1 et l explication en dessous. Google verifie
   que la page dit ce que fait l application. */
.hero .accroche { font-size: 19px; color: var(--texte); margin: 0 0 14px; }
.etapes ol { padding-left: 22px; max-width: 720px; }
.etapes li { margin-bottom: 10px; color: var(--texte-faible); }