/* Pymaride Systems — charte : noir profond, bleu métallique, argent */

:root {
  --bg: #05070a;
  --bg-soft: #0b1016;
  --panel: #0e141c;
  --line: #1c2836;
  --line-soft: #131c26;
  --silver: #e6ecf3;
  --text: #b6c2d0;
  --muted: #7c8a9b;
  --blue: #3d8fe0;
  --blue-deep: #1b5fa8;
  --blue-glow: rgba(61, 143, 224, 0.35);
  --radius: 14px;
  --maxw: 1080px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Halo bleu diffus derrière le haut de page */
body::before {
  content: "";
  position: fixed;
  top: -30vh;
  left: 50%;
  width: 120vw;
  height: 80vh;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(61, 143, 224, 0.13) 0%,
    rgba(61, 143, 224, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: #6db0ee; text-decoration: underline; }

/* ---------- En-tête ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5, 7, 10, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}

/* La marque reste à gauche ; navigation et sélecteur de langue sont
   poussés ensemble à droite, le sélecteur tout au bout. */
.topbar .nav { margin-left: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--silver);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 14px;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: #fff; }

/* L'emblème seul, découpé du logo : le logo complet contient déjà le nom
   « Pymaride Systems », qui devenait illisible à cette taille et faisait
   doublon avec le texte à côté. Hauteur fixe, largeur libre — l'emblème
   n'est pas carré et le déformer se verrait. */
.brand-mark {
  height: 32px;
  width: auto;
}

.nav {
  display: flex;
  gap: 22px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav a { color: var(--muted); }
.nav a:hover { color: var(--silver); text-decoration: none; }

/* Page courante : marquée par aria-current="page" dans le HTML */
.nav a[aria-current="page"] {
  color: var(--silver);
  box-shadow: inset 0 -1px 0 var(--blue);
}

/* ---------- Hero ---------- */

.hero {
  text-align: center;
  padding: 84px 0 72px;
}

.hero-logo {
  width: 280px;
  max-width: 72vw;
  height: auto;
  border-radius: 18px;
  margin: 0 auto 26px;
  display: block;
  box-shadow: 0 0 70px rgba(61, 143, 224, 0.14);
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--silver);
  letter-spacing: -0.01em;
}

.hero p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  color: var(--text);
}

/* Pastille d'accroche sous le logo.
   Elle porte une phrase, plus une étiquette de deux mots : les majuscules très
   espacées d'un libellé la rendraient illisible et deux fois trop large. D'où
   la casse normale, l'interlettrage discret et une largeur maximale qui la
   fait passer sur deux lignes équilibrées sur un téléphone. */
.eyebrow {
  display: inline-block;
  max-width: 30rem;
  margin-bottom: 22px;
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--blue);
  background: rgba(61, 143, 224, 0.06);
  text-wrap: balance;
}

/* ---------- Sélecteur de langue ----------
   <details>/<summary> natif : le menu s'ouvre sans une ligne de JavaScript,
   ce qui compte ici — la politique de sécurité du site interdit tout script. */

.lang {
  position: relative;
  flex: 0 0 auto;
}

.lang > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.lang > summary::-webkit-details-marker { display: none; }

.lang > summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.8;
}

.lang > summary:hover,
.lang[open] > summary {
  color: var(--silver);
  border-color: #2b4257;
}

.lang > ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 148px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.lang > ul a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.lang > ul a:hover {
  background: rgba(61, 143, 224, 0.1);
  color: var(--silver);
  text-decoration: none;
}

/* ---------- Titre des pages intérieures ---------- */

.page-head { padding: 60px 0 4px; }

.page-head h1 {
  margin: 0 0 12px;
  font-size: clamp(27px, 4.5vw, 38px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--silver);
  letter-spacing: -0.01em;
}

.page-head p {
  margin: 0;
  max-width: 620px;
  font-size: 17px;
  color: var(--text);
}

/* ---------- Sections ---------- */

section { padding: 56px 0; }

/* Une section qui suit directement le titre de page n'a pas besoin
   de rajouter son propre espacement en haut. */
.page-head + section { padding-top: 34px; }

.section-head {
  border-top: 1px solid var(--line-soft);
  padding-top: 40px;
  margin-bottom: 34px;
}

.section-head h2 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- Fiches jeux / applications ----------
   Un <article class="entry"> par titre, empilés dans une <div class="entries">.
   La mise en page vaut pour 1 titre comme pour 10 : dupliquer le bloc suffit. */

.entries {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 34px;
  align-items: start;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: border-color 0.2s ease;
}

.entry:hover { border-color: #2b4257; }

/* Vrai logo (img) ou dessin de substitution (svg) : même cadre dans les deux
   cas, pour que les fiches restent alignées. */
.entry-art svg,
.entry-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 0 46px rgba(61, 143, 224, 0.1);
}

.entry-body h3 {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  color: var(--silver);
  letter-spacing: -0.01em;
}

.entry-body .tagline {
  margin: 4px 0 16px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}

.entry-body .desc {
  margin: 0 0 20px;
  font-size: 16px;
}

.entry-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-size: 15px;
}

.entry-points li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}

/* Variante hors fiche (accueil, contact) : texte au gabarit du corps de page */
.entry-points.wide {
  font-size: 16px;
  max-width: 720px;
  margin-bottom: 0;
}

.entry-points.wide li { margin-bottom: 12px; }
.entry-points.wide strong { color: var(--silver); }

.entry-points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--blue);
  box-shadow: 0 0 7px var(--blue-glow);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue-glow);
}

.dot.soon { background: #d99a3d; box-shadow: 0 0 8px rgba(217, 154, 61, 0.4); }
.dot.live { background: #45b97c; box-shadow: 0 0 8px rgba(69, 185, 124, 0.4); }

.entry-links {
  margin-top: 14px;
  font-size: 13px;
}

.entry-links a { color: var(--muted); }
.entry-links a:hover { color: var(--blue); }

/* ---------- Liste des politiques (page d'index) ---------- */

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.doc-list a {
  display: block;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  transition: border-color 0.2s ease;
}

.doc-list a:hover { border-color: #2b4257; text-decoration: none; }

.doc-list strong {
  display: block;
  color: var(--silver);
  font-size: 18px;
  margin-bottom: 4px;
}

.doc-list span {
  display: block;
  color: var(--muted);
  font-size: 15px;
}

/* Liste d'adresses de contact : ici c'est l'adresse qui est l'information
   utile, pas la description — on la sort du gris. */
.doc-list.contacts span {
  color: var(--blue);
  font-size: 16px;
  margin-top: 2px;
}

.doc-list.contacts a:hover span { color: #6db0ee; }

/* ---------- Rubrique encore vide ----------
   Une section sans titre publié ne doit pas donner une page vide : on annonce
   ce qui arrive plutôt que de laisser un blanc. */

.empty-state {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
}

.empty-state h2 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  color: var(--silver);
  letter-spacing: 0;
  text-transform: none;
}

.empty-state p {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--text);
}

/* ---------- Contact ---------- */

.contact-box {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}

.contact-box p { margin: 0 0 20px; }

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.btn:hover { color: #fff; text-decoration: none; filter: brightness(1.1); }

/* ---------- Pied de page ---------- */

footer {
  border-top: 1px solid var(--line-soft);
  margin-top: 40px;
  padding: 32px 0 48px;
  font-size: 14px;
  color: var(--muted);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}

footer a { color: var(--muted); }
footer a:hover { color: var(--silver); }

/* ---------- Pages de texte (mentions légales) ---------- */

.doc { padding: 56px 24px 24px; max-width: 808px; }

.doc h1 {
  font-size: clamp(26px, 4vw, 34px);
  color: var(--silver);
  margin: 0 0 8px;
}

.doc .updated {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 40px;
}

.doc h2 {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 40px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.doc dl { margin: 0; }
.doc dt {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 14px;
}
.doc dd { margin: 2px 0 0; color: var(--silver); }

.doc .note {
  border-left: 2px solid var(--blue-deep);
  background: rgba(61, 143, 224, 0.05);
  padding: 12px 16px;
  margin: 18px 0;
  font-size: 15px;
  color: var(--text);
}

.todo {
  color: #d99a3d;
  font-weight: 600;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  /* En-tête sur deux rangs sous 640 px. Sur une seule ligne, la barre casse
     dans les langues aux mots longs — « ГЛАВНАЯ ИГРЫ ПРИЛОЖЕНИЯ КОНТАКТЫ »
     déborde là où « HOME GAMES APPS CONTACT » passait. Deux rangs tiennent
     dans les neuf langues sans dépendre de la longueur des libellés. */
  .topbar .wrap {
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
    padding: 9px 16px 7px;
  }
  .brand-mark { height: 28px; width: auto; }
  .brand { font-size: 11px; letter-spacing: 0.1em; gap: 8px; }
  .lang { margin-left: auto; }
  .lang > summary { padding: 4px 8px; font-size: 10px; gap: 4px; }
  .eyebrow { font-size: 13px; padding: 8px 16px; }

  .topbar .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: center;
    gap: 14px;
    font-size: 10px;
  }

  .page-head { padding: 44px 0 4px; }
  .hero { padding: 56px 0 48px; }
  section { padding: 40px 0; }
  .entry {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
  }
  .entry-art { max-width: 190px; margin: 0 auto; }
  .entry-body h3 { font-size: 24px; }
}