/* site.css — l'habillage commun du site public (index.html, support.html), dans la DA du jeu :
   la fonte du jeu (FeudalGambit, nette à 16 / 32 / 48 px), les panneaux de bois à double liseré d'or,
   l'or des titres (UiTheme.GOLD #edc961), le cramoisi des oriflammes, la nuit bleutée de la salle. */
@font-face { font-family: "FeudalGambit"; src: url("/site/fonte.ttf") format("truetype"); font-display: swap; }

:root {
  --nuit: #0b0910; --fond-titres: #110d17; --pierre: #17131f;
  --bois: #1e1611; --bois-clair: #2b2018; --liseret: #8a6a2e; --liseret-sombre: #3a2c1c;
  --or: #edc961; --or-pale: #f7e3a3; --parchemin: #e8dcc4; --doux: #b3a58b; --cramoisi: #8e1b1b;
  --vert: #6fe36b; --braise: #ff8a4c; --rouge: #e0705f;
  --pixel: "FeudalGambit", Georgia, serif;
  --gouttiere: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nuit); color: var(--parchemin); font: 16px/1.7 var(--pixel); letter-spacing: .02em; }
img { max-width: 100%; }
a { color: var(--or); }
a:hover { color: var(--or-pale); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.pixel { image-rendering: pixelated; }

/* ── l'en-tête ── */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(11, 9, 16, .86); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid rgba(138, 106, 46, .55); }
.entete-in { max-width: 1180px; margin: 0 auto; padding: 0 var(--gouttiere); height: 60px; display: flex; align-items: center; gap: 18px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--or); letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap; }
.marque img { width: 32px; height: 32px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--parchemin); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.nav a:hover, .nav a.on { color: var(--or); }
/* ⚑ « Beta test » (Franck, 16/10) : vers `/board`, l'ancien parcours — la connexion, puis le board pour un admin,
   `/testeur` pour un testeur (la gateway l'y envoie). */
.nav a.beta { color: var(--or); border: 1px solid var(--liseret); padding: 3px 10px; box-shadow: inset 0 0 0 1px var(--liseret-sombre); }
.nav a.beta:hover { color: var(--nuit); background: var(--or); border-color: var(--or); }
.langues { display: flex; border: 1px solid var(--liseret); }
.langues button { background: none; border: 0; color: var(--doux); font: 16px var(--pixel); padding: 3px 9px; cursor: pointer; }
.langues button.on { background: var(--liseret); color: var(--nuit); }
@media (max-width: 760px) {
  .nav { gap: 14px; }
  .nav .large { display: none; }
  .marque span { display: none; }
}

/* ── les boutons : la plaque d'or, et sa variante de bois ── */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 16px/1 var(--pixel); text-transform: uppercase;
  letter-spacing: .1em; text-decoration: none; cursor: pointer; padding: 14px 22px; color: #1d1408;
  background: linear-gradient(#f8de86, #d4a33c); border: 2px solid #5a3d12;
  box-shadow: inset 0 2px 0 #fff2bf, inset 0 -3px 0 #a37424, 0 3px 0 #1a1006, 0 8px 20px rgba(0, 0, 0, .45);
  transition: transform .12s, filter .12s; }
.btn:hover { color: #1d1408; filter: brightness(1.08); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.bois { color: var(--or); background: linear-gradient(var(--bois-clair), var(--bois)); border-color: var(--liseret);
  box-shadow: inset 0 0 0 2px var(--liseret-sombre), 0 3px 0 #050304, 0 8px 20px rgba(0, 0, 0, .45); }
.btn.bois:hover { color: var(--or-pale); }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.pastille { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px dashed var(--liseret);
  color: var(--doux); text-transform: uppercase; letter-spacing: .1em; }

/* ── le panneau du jeu : bois sombre, double liseré d'or ── */
.panneau { background: var(--bois); border: 2px solid var(--liseret);
  box-shadow: 0 0 0 2px #070504, inset 0 0 0 3px var(--bois), inset 0 0 0 5px var(--liseret-sombre), 0 14px 40px rgba(0, 0, 0, .55); }
.cadre { margin: 0; padding: 6px; background: var(--bois); border: 2px solid var(--liseret);
  box-shadow: 0 0 0 2px #070504, inset 0 0 0 2px var(--liseret-sombre), 0 14px 40px rgba(0, 0, 0, .55); }
.cadre > img, .cadre > video { display: block; width: 100%; height: auto; }

/* ── les titres de section : l'or entre deux filets et deux losanges ── */
.titre-section { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 34px;
  font: 32px/1.2 var(--pixel); color: var(--or); text-transform: uppercase; letter-spacing: .12em; text-align: center;
  text-shadow: 0 3px 0 #2a1a08; }
.titre-section::before, .titre-section::after { content: "◆"; font-size: 16px; color: var(--liseret);
  padding: 0 0 0 60px; background: linear-gradient(90deg, transparent, var(--liseret)) left center / 54px 2px no-repeat; }
.titre-section::after { padding: 0 60px 0 0; background: linear-gradient(270deg, transparent, var(--liseret)) right center / 54px 2px no-repeat; }
@media (max-width: 560px) {
  .titre-section { font-size: 24px; gap: 10px; }
  .titre-section::before { padding-left: 30px; background-size: 26px 2px; }
  .titre-section::after { padding-right: 30px; background-size: 26px 2px; }
}

/* ── le pied ── */
.pied { background: #07060a; border-top: 1px solid rgba(138, 106, 46, .4); color: var(--doux); }
.pied-in { max-width: 1180px; margin: 0 auto; padding: 26px var(--gouttiere); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.pied img { width: 32px; height: 32px; }
.pied a { color: var(--doux); }
.pied a:hover { color: var(--or); }
.pied .droite { margin-left: auto; display: flex; gap: 22px; }
/* ⚑ 24/10 — les réseaux du jeu, au pied de chaque page (Franck : « ajouter tous les réseaux créés »). */
.reseaux { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.reseaux a { text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; color: var(--or);
  border: 1px solid var(--liseret-sombre); padding: 2px 9px; }
.reseaux a:hover { color: var(--nuit); background: var(--or); border-color: var(--or); }