/* Nox (3/11) : chargé APRÈS solar.css sur l'édition Nox seulement (SITE_EDITION=nox). Même mise en page que Solar ; ici
   seulement les couleurs et les polices de Nox : bleu nuit, turquoise, laiton (recherche-et-plan.md § 1.4), titres en
   Cinzel (OFL, fonts/OFL.txt). Même sobriété que la passe « sober » de Solar : rien qui brille, pulse ou tourne, pas de
   halo, des aplats ; le seul motif est un cadran en traits fins, immobile, derrière Nox. Solar garde solar.css tel quel. */
@font-face { font-family: 'Cinzel'; src: url('../fonts/Cinzel.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }

:root {
  --nuit: #060912; --nuit2: #0b1020; --nuit3: #121a2e; --nuit4: #1a2440;
  --ligne: rgba(95, 227, 214, .13); --ligne2: rgba(95, 227, 214, .28); --ligne3: rgba(95, 227, 214, .55);
  --or: #39d0c4; --or2: #1f9e95; --ambre: #c9a25a; --braise: #8a6a3a; --corona: #c8fbf5;
  --texte: #e8eef6; --texte2: #a3afc2; --texte3: #6b7790;
  --rouge: #e2574c;
  --or-grad: linear-gradient(180deg, #e6fffc 0%, #5fe3d6 45%, #1f9e95 100%);
  --titre: 'Cinzel', Georgia, 'Times New Roman', serif;
  --laiton: #c9a25a;
  /* fonds des cartes et panneaux */
  --carte-haut: rgba(20, 30, 52, .78); --carte-bas: rgba(8, 12, 24, .9);
  --bouton: #39d0c4; --bouton-survol: #5fe3d6; --bouton-texte: #03201d;
}

body { background: var(--nuit); }
::selection { background: rgba(57, 208, 196, .35); color: #fff; }
.surtitre { color: var(--laiton); }
th, .pied-grille h4, .classe-carte .role { color: var(--laiton); }

/* titres : Cinzel (capitales romaines, comme les chiffres d'un cadran), sans resserrer les lettres */
h1, h2, h3 { font-weight: 700; letter-spacing: .01em; }
.page-hero h1, .section-titre h2, .appel h2, .fiche-tete h1, .atout h3, .classe-carte h3 { font-weight: 700; letter-spacing: .01em; }
/* les chiffres et les noms restent dans la police du texte, plus lisible */
.chiffre b, .compteur b, .big, .rank, .medaille, .item .price, .etape .n, .atout .num, .plaque .nom, .bandeau .icone { font-family: var(--corps); }

/* ------------------------------------------------------------------ en-tête */
.entete.defile { background: linear-gradient(180deg, rgba(6, 9, 18, .94), rgba(6, 9, 18, .65) 70%, transparent); }
.status-pill { background: rgba(10, 16, 30, .7); }
.cadre { background: rgba(11, 17, 32, .9); }
.pilule:hover, .menu:focus-within > .pilule, .menu.ouvert > .pilule { background: rgba(57, 208, 196, .07); }
.menu-liste { background: rgba(9, 14, 28, .98); }
.menu-liste a:hover, .menu-liste a.on { background: rgba(57, 208, 196, .08); }
.logo-centre img { filter: none; }

/* ------------------------------------------------------------------ panneaux, formulaires, boutons, tableaux */
.panel { background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); }
.panel.dark { background: linear-gradient(180deg, rgba(14, 40, 46, .55), var(--carte-bas)); }
input:focus, select:focus, textarea:focus { background: rgba(57, 208, 196, .05); box-shadow: 0 0 0 4px rgba(57, 208, 196, .12); }
.btn { color: var(--bouton-texte); background: var(--bouton); }
.btn:hover { color: var(--bouton-texte); background: var(--bouton-survol); }
.btn.gris { color: var(--texte); background: rgba(12, 19, 36, .7); }
.btn.gris:hover { color: #fff; background: rgba(22, 34, 60, .85); }
td { border-bottom-color: rgba(95, 227, 214, .07); }
tbody tr:hover td { background: rgba(57, 208, 196, .05); }
.tabs a.on, .tabs button.on, .pager .on { color: var(--bouton-texte); background: var(--bouton); }
.item { background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); }
.item-icon { background: radial-gradient(circle, rgba(57, 208, 196, .16) 0, rgba(18, 26, 46, .9) 70%); }
.guide-body code { background: rgba(57, 208, 196, .1); }
.guide-body blockquote { border-left-color: var(--laiton); background: rgba(201, 162, 90, .07); }
.connexion-requise .cadenas { background: rgba(57, 208, 196, .1); }
.graphe .grille line { stroke: rgba(95, 227, 214, .08); }
.journal li { border-bottom-color: rgba(95, 227, 214, .07); }
.puce { background: rgba(6, 9, 18, .6); }
.bandeau { background: rgba(9, 14, 28, .98); }
.bandeau .icone { color: var(--bouton-texte); background: var(--bouton); }

/* ------------------------------------------------------------------ cartes des pages */
.atout, .etape, .compteur, .carte-actu { background: linear-gradient(170deg, var(--carte-haut), var(--carte-bas)); }
.carte-telechargement { background: linear-gradient(180deg, rgba(14, 36, 46, .6), var(--carte-bas)); }
.chiffre, .plaque { background: rgba(9, 14, 28, .72); }
.aussi span { background: rgba(57, 208, 196, .04); }
.socle { background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 10%, #17223a) 0%, #101829 60%, #0a101d 100%); }
.podium-zone::before { background: linear-gradient(180deg, var(--nuit), transparent 25%, transparent 75%, var(--nuit)); }
.appel::after { background: linear-gradient(180deg, var(--nuit) 0%, rgba(6, 9, 18, .35) 40%, rgba(6, 9, 18, .5) 70%, var(--nuit) 100%); }
.classe-carte::after { background: linear-gradient(180deg, transparent 35%, rgba(6, 9, 18, .96) 86%); }
.fiche-tete::after { background: linear-gradient(90deg, rgba(6, 9, 18, .2), rgba(6, 9, 18, .85) 60%), linear-gradient(0deg, rgba(6, 9, 18, .9), transparent 40%); }
footer.pied { background: rgba(4, 6, 12, .96); }

/* ------------------------------------------------------------------ accueil : Nox à droite du titre, sur un cadran */
.hero-nox { grid-template-columns: minmax(0, 1fr); text-align: left; padding: calc(var(--entete) + 24px) 24px 150px; background: var(--nuit); }
.hero-nox::after { display: none; }
.hero-nox-grille { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; }
.hero-nox .hero-contenu { max-width: 620px; }
.hero-nox h1 { line-height: 1.05; }
.hero-nox .ligne1 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; color: var(--texte2); text-shadow: none; }
.hero-nox .grand { font-size: clamp(2.5rem, 5.4vw, 4.6rem); font-weight: 700; letter-spacing: .005em; margin-top: 10px; color: var(--texte); text-shadow: none; }
.hero-nox .accroche { margin: 24px 0 0; max-width: 560px; color: var(--texte2); text-shadow: none; }
.js.pret .hero-nox .accroche { opacity: 1; }
.hero-nox .actions { justify-content: flex-start; }
.nox-figure { position: relative; display: grid; place-items: center; min-height: min(70vh, 600px); }
.nox-figure .cadran { position: absolute; width: min(540px, 100%); height: auto; aspect-ratio: 1; fill: none; stroke: rgba(95, 227, 214, .16); stroke-width: 1; }
.nox-figure .cadran line { stroke: rgba(201, 162, 90, .35); }
.nox-figure .cadran line.h { stroke: rgba(201, 162, 90, .7); stroke-width: 2; }
.nox-figure .cadran text { fill: rgba(201, 162, 90, .8); stroke: none; font: 600 22px var(--titre); letter-spacing: .08em; }
.nox-figure img { position: relative; height: min(64vh, 560px); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .55)); }
.js .nox-figure img { opacity: 0; transition: opacity .9s var(--ease) .1s; }
.js.pret .nox-figure img { opacity: 1; }
@media (max-width: 900px) {
  .hero-nox { text-align: center; padding: calc(var(--entete) + 18px) 16px 40px; }
  .hero-nox .chiffres { width: 100%; }
  .hero-nox-grille { grid-template-columns: 1fr; gap: 8px; }
  .hero-nox .hero-contenu { margin: 0 auto; }
  .hero-nox .accroche { margin-left: auto; margin-right: auto; }
  .hero-nox .actions { justify-content: center; }
  .nox-figure { min-height: 0; padding: 18px 0 0; }
  .nox-figure .cadran { width: min(380px, 92%); }
  .nox-figure img { height: min(46vh, 380px); }
  .hero-nox .chiffres { position: static; transform: none; margin: 30px auto 0; }
}

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 1080px) {
  .burger { background: rgba(10, 16, 30, .75); }
  .entete.mobile-ouvert { background: rgba(6, 9, 18, .98); }
}
@media (prefers-reduced-motion: reduce) {
  .js .nox-figure img { opacity: 1 !important; }
}
/* solar.css enlève tout transform en « animations réduites » : les compteurs, centrés par translateX(-50%), partaient à
   droite. Sur Nox, on garde leur centrage */
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .js .hero-nox .chiffres { transform: translateX(-50%) !important; }
}