/* SHADOWVALE — THE LAST ARROW
   Mise en page : l'archère tient l'ouverture à droite, le texte à gauche ; puis la
   campagne se lit comme une galerie, un monde par vue, le décor d'abord et le gardien
   en dernière ligne ; puis le ton redescend vers un document sobre.
   Parti pris : un seul thème, la nuit. Un site clair trahirait le jeu. */

:root {
  color-scheme: dark;

  --nuit:      #090D0C;
  --nuit-2:    #101715;
  --brume:     #18221F;
  --bord:      #253230;

  --or:        #E0AF48;
  --or-clair:  #F4DCA4;
  --turquoise: #4FE3D8;
  --mousse:    #8FA87E;

  --texte:     #DFD9CC;
  --doux:      #96A096;

  --titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --corps: "Inter", "Segoe UI", system-ui, sans-serif;

  --colonne: 68ch;
}

* { box-sizing: border-box; }

/* Le defilement est doux, et les ancres s'arretent SOUS la barre collante : sans cette
   reserve, un titre vise par un lien se gare derriere elle. Qui a demande moins
   d'animation retrouve le defilement sec du navigateur. */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ——— retour en haut ——— */
.remonter {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: rgba(16, 23, 21, .92);
  color: var(--or);
  text-decoration: none;
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, border-color .2s, color .2s;
}
.remonter.vu { opacity: 1; visibility: visible; transform: none; }
.remonter:hover { border-color: var(--or); color: var(--or-clair); }

/* ——— LES DEUX LANGUES ———
   Meme mecanisme que les pages legales deja en ligne : deux boutons radio caches, poses
   avant tout le reste, et des regles en frere-suivant. Pas de JavaScript pour basculer --
   la page reste lisible dans les deux langues meme si le script ne part pas. */
/* ON MASQUE LA LANGUE NON CHOISIE, ON N'EN MONTRE AUCUNE DE FORCE. La premiere version
   cachait l'anglais par defaut puis le remettait en `display:block`. Deux defauts, tous
   deux vus a l'ecran : `.en` etait plus faible que `.fiche dl` ou `.pied nav`, donc les
   deux langues s'affichaient ensemble ; et `block` ecrasait la grille de la fiche. Ici
   seule la langue a cacher porte une regle, et celle qui reste garde sa mise en page
   d'origine, grille et boutons compris. Le `:not(#_)` ne change pas ce qui est vise : il
   donne a la regle le poids d'un identifiant, assez pour passer devant la mise en page. */
.choix { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
#choix-fr:checked ~ * .en:not(#_) { display: none; }
#choix-en:checked ~ * .fr:not(#_) { display: none; }

/* LE CHOIX DE LA LANGUE EST TYPOGRAPHIQUE, PAS ILLUSTRE. Deux drapeaux posaient deux
   taches de bleu-blanc-rouge dans une page qui n'a que de l'or et du vert. */
.langues {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
}
.langues span { color: var(--bord); }
.langues label {
  cursor: pointer;
  color: var(--doux);
  transition: color .15s;
}
.langues label:hover { color: var(--or-clair); }
#choix-fr:checked ~ * label[for="choix-fr"],
#choix-en:checked ~ * label[for="choix-en"] {
  color: var(--or);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--or); text-underline-offset: 3px; }
a:hover { color: var(--or-clair); }
:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; border-radius: 2px; }

/* ——— ossature ——— */

.bande { width: 100%; }
.dedans {
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-block: 76px;
}
.etroit { max-width: var(--colonne); }

h1, h2, h3 { font-family: var(--titre); font-weight: 600; text-wrap: balance; margin: 0; }

.surtitre {
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--doux);
  margin: 0 0 14px;
}

h2 { font-size: clamp(30px, 5vw, 42px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ——— barre de navigation ——— */

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: rgba(9, 13, 12, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.nav .dedans { padding-block: 12px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.marque {
  font-family: var(--titre);
  font-size: 19px;
  letter-spacing: .1em;
  color: var(--or-clair);
  text-decoration: none;
  white-space: nowrap;
}
.nav nav { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.nav nav a { font-size: 13px; color: var(--doux); text-decoration: none; letter-spacing: .04em; }
.nav nav a:hover { color: var(--or-clair); }
.nav .langues { margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--bord); }
@media (max-width: 680px) {
  .nav .dedans { gap: 10px 14px; }
  .nav nav { gap: 14px; order: 3; width: 100%; margin-left: 0; }
  .nav .langues { margin-left: auto; }
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 21;
  background: var(--nuit);
}

/* ——— ouverture ——— */

.ouverture {
  position: relative;
  border-bottom: 1px solid var(--bord);
  background: var(--nuit);
  overflow: hidden;
  isolation: isolate;
}
.ouverture .film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  z-index: -2;
}
/* LE VOILE DOIT RENDRE LE TEXTE LISIBLE SANS ETEINDRE LE FILM. Le premier essai posait
   82 % de noir sur toute la moitie gauche : la foret n'y etait plus. Il ne couvre plus
   que ce qu'il faut, et la lune reste visible a droite. */
.ouverture .voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(9, 13, 12, .88) 0%, rgba(9, 13, 12, .62) 34%, rgba(9, 13, 12, .12) 68%, transparent 100%),
    linear-gradient(to top, var(--nuit) 0%, transparent 38%);
}
.ouverture .dedans {
  position: relative;
  padding-block: clamp(56px, 8vw, 96px);
  min-height: min(62vh, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .ouverture .voile {
    background: linear-gradient(to top, var(--nuit) 12%, rgba(9, 13, 12, .72) 52%, rgba(9, 13, 12, .3) 100%);
  }
}

/* texte et image cote a cote (section Nyra) */
.deux {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 52px);
  align-items: center;
}
@media (max-width: 820px) { .deux { grid-template-columns: 1fr; } }
.portrait { border: 1px solid var(--bord); border-radius: 2px; overflow: hidden; background: var(--nuit); }
.portrait img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 28%; }

.ouverture h1 {
  font-size: clamp(42px, 8vw, 78px);
  line-height: .98;
  letter-spacing: .03em;
  color: var(--or-clair);
  margin: 0 0 4px;
}
.sous {
  font-family: var(--titre);
  font-size: clamp(19px, 3.2vw, 27px);
  font-style: italic;
  color: var(--or);
  margin: 0 0 22px;
}
.accroche { font-size: 17px; max-width: 46ch; text-shadow: 0 1px 16px rgba(0, 0, 0, .85); }
.ouverture h1, .ouverture .sous { text-shadow: 0 2px 28px rgba(0, 0, 0, .8); }

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.bouton {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--or);
  color: var(--nuit);
  background: var(--or);
  transition: background .18s, color .18s;
}
.bouton:hover { background: var(--or-clair); color: var(--nuit); }
.bouton.creux { background: transparent; color: var(--or); }
.bouton.creux:hover { background: rgba(224, 175, 72, .14); color: var(--or-clair); }
.mention { font-size: 13px; color: var(--doux); margin-top: 18px; }

.ouverture-image {
  border: 1px solid var(--bord);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background: var(--nuit-2);
}
.ouverture-image img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 30%; }
.ouverture-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 62%, rgba(9, 13, 12, .55));
  pointer-events: none;
}

/* ——— fiche technique ——— */

.fiche { background: var(--nuit-2); border-bottom: 1px solid var(--bord); }
.fiche .dedans { padding-block: 26px; }
.fiche dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 28px; }
.fiche dt { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--doux); margin-bottom: 4px; }
.fiche dd { margin: 0; font-size: 15px; }

/* ——— la galerie des mondes ——— */

.mondes { border-bottom: 1px solid var(--bord); }
.cartes {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 26px;
}
@media (max-width: 420px) { .cartes { grid-template-columns: 1fr; } }

.carte {
  min-width: 0;
  border: 1px solid var(--bord);
  border-radius: 2px;
  background: var(--nuit-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.carte .vue { position: relative; background: var(--nuit); }
.carte .vue img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16, .84, .34, 1);
}
.carte:hover .vue img { transform: scale(1.045); }
.carte .vue::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(16, 23, 21, .9));
  pointer-events: none;
}

.carte .texte { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte .rang {
  margin: 0;
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--or);
}
.carte h3 { color: var(--or-clair); }
.carte .desc { margin: 0; font-size: 14.5px; color: var(--doux); flex: 1; }
.carte .gardien {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--bord);
  font-size: 14px;
  color: var(--mousse);
  font-weight: 600;
}
.carte .gardien span {
  display: block;
  font-family: var(--corps);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--doux);
  margin-bottom: 2px;
}

/* ——— les images de parties ——— */

.enjeu { background: var(--nuit-2); border-bottom: 1px solid var(--bord); }
.galerie {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.galerie figure:first-child { grid-column: 1 / -1; }
@media (max-width: 680px) {
  .galerie { grid-template-columns: 1fr; }
  .galerie figure:first-child { grid-column: auto; }
}
.galerie figure { margin: 0; min-width: 0; border: 1px solid var(--bord); border-radius: 2px; overflow: hidden; background: var(--nuit); }
.galerie img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.galerie figcaption { padding: 12px 16px; font-size: 13.5px; color: var(--doux); }

.carte-sommet {
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(224, 175, 72, .1), transparent 70%),
    var(--nuit-2);
  border-style: dashed;
  justify-content: center;
}
.carte-sommet .texte { padding-block: 40px; }
.carte-sommet .desc { font-family: var(--titre); font-style: italic; font-size: 18px; color: var(--texte); flex: 0; }

/* ——— le répertoire ——— */

/* SIX CASES, ET LE COMPTE DOIT TOMBER JUSTE. En colonnes automatiques, l'ecran large en
   affichait quatre : deux cases vides au second rang, un trou gris dans la grille. Trois,
   deux ou une : six se divise par les trois. */
.gestes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--bord);
  border: 1px solid var(--bord);
  margin-top: 40px;
}
@media (max-width: 900px) { .gestes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gestes { grid-template-columns: 1fr; } }
.geste { background: var(--nuit); padding: 26px 24px; min-width: 0; transition: background .3s ease; }
.geste:hover { background: var(--nuit-2); }
.geste h3 { color: var(--or-clair); margin-bottom: 8px; }
.geste p { font-size: 14.5px; color: var(--doux); }

/* ——— document ——— */

.document { background: var(--nuit-2); border-top: 1px solid var(--bord); }
.document .dedans { padding-block: 76px; }
.maj { font-size: 13px; color: var(--doux); margin: 0 0 30px; }

.article { margin-top: 30px; }
.article h3 {
  font-family: var(--corps);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
}
.article p, .article li { font-size: 15px; }
.article ul { margin: 0 0 1.1em; padding-left: 20px; }
.article li { margin-bottom: .45em; }
.article li::marker { color: var(--mousse); }

code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .92em;
  color: var(--or-clair);
  background: var(--brume);
  padding: 1px 5px;
  border-radius: 2px;
}

/* ——— pied ——— */

.pied { border-top: 1px solid var(--bord); background: var(--nuit); }
.pied .dedans { padding-block: 44px; }
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr; gap: 26px; } }
.pied p { font-size: 13px; color: var(--doux); margin: 0; }
.pied-titre {
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte) !important;
  margin-bottom: 12px !important;
}
.pied nav { display: flex; flex-direction: column; gap: 9px; }
.pied nav a { font-size: 13.5px; color: var(--doux); text-decoration: none; }
.pied nav a:hover { color: var(--or-clair); text-decoration: underline; }