/* ==========================================================================
   Ostrakon — feuille de style commune à toutes les pages du site.

   Les couleurs sont des variables définies ici et nulle part ailleurs : pour
   changer la teinte du site, il suffit de toucher ce bloc. Chaque variable est
   redéfinie deux fois pour le thème sombre — une fois pour le réglage du
   système, une fois pour le bouton de la page — afin que les deux gagnent.

   Marbre et bronze : le fond est un gris très légèrement vert, la couleur
   d'accent un bronze antique, et le bleu ne sert qu'aux liens et aux repères.
   ========================================================================== */

:root {
  --fond: #F2F3F0;
  --papier: #FFFFFF;
  --encre: #1B2530;
  --doux: #5A6570;
  --trait: #D8DCD6;
  --bronze: #8E5F17;
  --bronze-pale: #F6EBD8;
  --egee: #22587F;
  --egee-pale: #E2EDF5;
  --code-fond: #ECEEEA;
  --chat: #22262B;

  --serif: "Marcellus", "Times New Roman", serif;
  --texte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #12171C;
    --papier: #192129;
    --encre: #E3E7EA;
    --doux: #97A3AD;
    --trait: #2A3540;
    --bronze: #E0B266;
    --bronze-pale: #2F2615;
    --egee: #80B7E0;
    --egee-pale: #1B2D3C;
    --code-fond: #222D37;
    --chat: #0B0E11;
  }
}

:root[data-theme="dark"] {
  --fond: #12171C;
  --papier: #192129;
  --encre: #E3E7EA;
  --doux: #97A3AD;
  --trait: #2A3540;
  --bronze: #E0B266;
  --bronze-pale: #2F2615;
  --egee: #80B7E0;
  --egee-pale: #1B2D3C;
  --code-fond: #222D37;
  --chat: #0B0E11;
}

* { box-sizing: border-box; }

html {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 17px/1.65 var(--texte);
}

img { max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: 2.7rem; margin: 0 0 .3em; }
h2 { font-size: 1.7rem; margin: 2em 0 .5em; }
h3 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
p { margin: 0 0 .9em; }
a { color: var(--egee); }
:focus-visible { outline: 2px solid var(--egee); outline-offset: 2px; }

/* -------------------------------------------------- bandeau de navigation */

.bandeau {
  border-bottom: 1px solid var(--trait);
  background: var(--papier);
}
.bandeau > div {
  max-width: 62rem;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
}
.bandeau .marque {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
}
.bandeau nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: .95rem; }
.bandeau nav a { color: var(--doux); text-decoration: none; }
.bandeau nav a:hover { color: var(--encre); }
.bandeau nav a[aria-current="page"] { color: var(--bronze); font-weight: 700; }

/* ------------------------------------------------------------- mise en page */

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 20px;
  padding-block: 44px 72px;
}
main.large { max-width: 62rem; }

.surtitre {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--bronze);
  font-weight: 700;
  margin-bottom: .6em;
}
.chapo { font-size: 1.12rem; color: var(--doux); }

/* Frise grecque : deux dégradés, aucune image à charger. */
.meandre {
  height: 10px;
  margin: 26px 0 34px;
  opacity: .4;
  background:
    linear-gradient(90deg, var(--bronze) 0 2px, transparent 2px) 0 0 / 20px 10px,
    linear-gradient(var(--bronze) 0 2px, transparent 2px) 0 0 / 20px 10px;
}

/* ------------------------------------------------------------------ blocs */

.fiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}
.fiche li {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 12px 14px;
}
.fiche b { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--doux); font-weight: 700; }
.fiche span { font-weight: 700; overflow-wrap: anywhere; }

.note, .attention {
  border-radius: 6px;
  padding: 12px 16px;
  margin: 1.2em 0;
}
.note { background: var(--egee-pale); }
.attention { background: var(--bronze-pale); }
.note p:last-child, .attention p:last-child { margin-bottom: 0; }
.note strong:first-child { color: var(--egee); }
.attention strong:first-child { color: var(--bronze); }

code, kbd {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--code-fond);
  border-radius: 4px;
  padding: .05em .35em;
}
kbd { border: 1px solid var(--trait); border-bottom-width: 2px; }
pre {
  font-family: var(--mono);
  background: var(--papier);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--bronze);
  border-radius: 4px;
  padding: 12px 16px;
  overflow-x: auto;
  font-size: .86rem;
  line-height: 1.7;
}

.bouton {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--fond);
  background: var(--encre);
  border-radius: 6px;
  padding: 10px 20px;
}
.bouton:hover { background: var(--bronze); color: #fff; }

.tableau { overflow-x: auto; margin: .5em 0 1.4em; background: var(--papier); border: 1px solid var(--trait); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--doux); font-weight: 700; background: var(--fond); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Étapes numérotées du tutoriel : la numérotation vient du CSS, donc on peut
   insérer une étape sans renuméroter le texte à la main. */
ol.etapes { list-style: none; padding: 0; margin: 0; counter-reset: etape; display: grid; gap: 38px; }
ol.etapes > li { counter-increment: etape; position: relative; padding-left: 3.4rem; }
ol.etapes > li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -.1rem;
  width: 2.4rem; height: 2.4rem;
  border: 1.5px solid var(--bronze);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
}
ol.etapes h2 { font-size: 1.4rem; margin-top: 0; }
ol.sous, ul.sous { padding-left: 1.25em; margin: 0 0 .9em; }
ol.sous li, ul.sous li { margin: .35em 0; }

/* Ce qu'on lit à l'écran dans le jeu : fond sombre, quelle que soit le thème. */
.chat {
  background: var(--chat);
  border-radius: 6px;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: .88rem;
  line-height: 1.8;
  margin: .6em 0 1.4em;
  overflow-x: auto;
}
.chat div { white-space: nowrap; }
.chat .pre { color: #777; display: inline-block; min-width: 4.5ch; }

/* ------------------------------------------------------------------- pied */

.pied {
  border-top: 1px solid var(--trait);
  color: var(--doux);
  font-size: .88rem;
}
.pied > div {
  max-width: 62rem;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

@media (max-width: 520px) {
  h1 { font-size: 2.1rem; }
  ol.etapes > li { padding-left: 2.8rem; }
  ol.etapes > li::before { width: 2rem; height: 2rem; font-size: 1rem; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }