/* Crystalize Studio — feuille de style commune.
   Les couleurs sont celles de l'application Myoforge (thème azur
   sombre), pour que le site et le produit ne se contredisent pas. */

:root {
  --fond: #04060c;
  --panneau: #0a0f1a;
  --panneau-eleve: #111b2e;
  --texte: #e8eef7;
  --doux: #9aa9bd;
  --faible: #7e8fa6;
  --accent: #4cc9f0;
  --bordure: #1b2536;
  --bordure-vive: #33507a;
  --succes: #3ddc97;
  --alerte: #f5c542;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 46rem; margin: 0 auto; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* ── Emblème ─────────────────────────────────────────────────── */

/* Deux marques distinctes, et il ne faut pas les confondre : le cristal
   est celle du studio, la synapse celle de l'application. */
.embleme { width: 2.4rem; height: 2.4rem; flex: none; }

/* Les tracés de la synapse portent leurs propres remplissages — vif en
   `currentColor`, ombres en noir — parce que l'emblème est taillé et non
   colorié. Une règle `fill` ici écraserait les facettes. */
.embleme-myoforge { width: 3.4rem; height: 3.4rem; flex: none; color: var(--accent); }

.titre-produit { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.titre-produit h1 { margin: 0; }

/* ── Le bandeau de tête ───────────────────────────────────────────
   Le nom à gauche, la marque à droite : la disposition de la bannière
   du Play Console, pour que le studio se présente partout pareil. */

.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.5rem 0 0.5rem;
  color: var(--accent);
  text-decoration: none;
}

.bandeau__mot { max-width: min(19rem, 58vw); height: auto; }

/* Le mot-symbole de Myoforge est un trace, pas une image : il est deux fois
   plus allonge que celui de Crystalize (7,7 contre 4,2), et la meme largeur
   maximale le rendrait deux fois plus court. On le cale donc sur sa HAUTEUR,
   celle qu avait le nom en texte. */
.bandeau__mot--myoforge {
  max-width: min(22rem, 66vw);
  height: clamp(1.6rem, 6.2vw, 2.3rem);
  width: auto;
  display: block;
}
.bandeau__marque { height: clamp(3.4rem, 11vw, 4.6rem); width: auto; flex: none; }

/* Le nom d'un produit, quand aucune image de marque n'existe pour lui. */
.bandeau__nom {
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.bandeau__editeur {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faible);
  text-decoration: none;
}
.bandeau__editeur:hover { color: var(--doux); }

/* ── Titres ──────────────────────────────────────────────────── */

h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.5rem;
}
h2 {
  font-size: 1.1rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
  color: var(--accent);
}
h3 { font-size: 0.95rem; margin-top: 1.75rem; }

.chapeau { color: var(--doux); font-size: 1.05rem; max-width: 38rem; }
.maj { color: var(--faible); font-size: 0.85rem; margin-top: 0; }

/* ── Blocs ───────────────────────────────────────────────────── */

.encadre {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.encadre--alerte { border-left: 3px solid var(--alerte); }
.encadre--accent { border-left: 3px solid var(--accent); }
.encadre p:first-child { margin-top: 0; }
.encadre p:last-child { margin-bottom: 0; }

.cartes { display: grid; gap: 1rem; margin: 2rem 0; }
@media (min-width: 40rem) { .cartes { grid-template-columns: 1fr 1fr; } }

.carte {
  display: block;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: 0.9rem;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.carte:hover { border-color: var(--bordure-vive); transform: translateY(-2px); }
.carte h3 { margin: 0 0 0.35rem; color: var(--accent); font-size: 1.05rem; }
.carte p { margin: 0; color: var(--doux); font-size: 0.9rem; }
.carte__accroche { color: var(--texte) !important; margin-bottom: 0.5rem !important; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
th, td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
th { color: var(--doux); font-weight: 600; }

ul { padding-left: 1.2rem; }
li { margin: 0.4rem 0; }

code {
  background: var(--panneau);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

/* ── Pied ────────────────────────────────────────────────────── */

footer {
  max-width: 46rem;
  margin: 4rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
  color: var(--faible);
  font-size: 0.85rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }

/* ── Sélecteur de langue ─────────────────────────────────────── */

.langues { display: flex; gap: 0.5rem; margin: 2rem 0; }
.langues button {
  background: transparent;
  border: 1px solid var(--bordure);
  color: var(--doux);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.langues button[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); }
[data-langue] { display: none; }
[data-langue].actif { display: block; }