/* La forge — pierre claire, encre, cuivre et lumière du feu. */
:root {
  color-scheme:light;
  --encre:#f3efe6;
  --encre-2:#eae4d8;
  --encre-3:#e2d9ca;
  --encre-4:#d6c9b8;
  --os:#302f2a;
  --os-2:#595b51;
  --brume:#6e6d62;
  --brume-2:#7d786c;
  --trait:rgba(72,59,38,.16);
  --trait-2:rgba(72,59,38,.28);
  --lueur:#a54b28;
  --braise:#be693e;
  --voile:#dfc7aa;
  --nuit:#e9dfcf;
  --lueur-a:rgba(173,85,40,.09);
  --lueur-b:rgba(173,85,40,.3);
  --sans:'Manrope',Arial,sans-serif;
  --large:1280px;
  --marge:clamp(22px,5vw,80px);
  --rayon:3px
}

body {
  background:var(--encre)
}

body::before {
  background:radial-gradient(ellipse at 85% 0%,#d9b2781a,transparent 50%)
}

body::after {
  opacity:.055;
  mix-blend-mode:multiply;
  inset:0;
  background-size:130px 130px
}

.entete {
  max-width:none;
  margin:0 var(--marge);
  padding:27px 0 25px;
  border-bottom:1px solid var(--trait);
  gap:32px
}

.marque {
  gap:12px
}

.marque svg {
  width:37px;
  color:var(--lueur)
}

.marque span {
  font:500 22px/1.1 var(--sans);
  letter-spacing:.24em
}

.marque small {
  display:block;
  font:400 7px/1.5 var(--mono);
  letter-spacing:.12em;
  color:var(--brume);
  margin-top:7px
}

.nav {
  gap:28px
}

.nav a {
  font:400 11px/1.3 var(--sans);
  text-transform:none;
  letter-spacing:.03em;
  color:#686b5e
}

.nav a[aria-current] {
  color:var(--lueur)
}

.nav a[aria-current]::after {
  bottom:-7px;
  background:var(--lueur);
  width:3px;
  height:3px
}

.entete-heure {
  font:400 9px/1 var(--mono);
  letter-spacing:.1em;
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  color:var(--os-2)
}

.point-vivant {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#a95b31;
  box-shadow:0 0 12px #d9ab7c66;
  flex-shrink:0
}

.pied {
  margin-top:75px;
  padding-top:32px;
  padding-bottom:32px
}

.pied .signature {
  font:500 15px/1 var(--sans);
  letter-spacing:.2em;
  color:var(--os);
  text-decoration:none
}

.pied .etiquette {
  font:400 9px/1.5 var(--mono);
  letter-spacing:.08em
}

.bouton {
  border-radius:3px;
  font:600 12px/1 var(--sans);
  text-transform:none;
  letter-spacing:.015em;
  min-height:53px;
  padding:0 25px;
  background:var(--lueur);
  box-shadow:none
}

.bouton:hover {
  box-shadow:0 5px 35px #d2995930;
  transform:translateY(-2px)
}

.bouton.fantome {
  background:transparent
}

.aller-contenu {
  position:fixed;
  top:8px;
  left:20px;
  z-index:110;
  background:var(--lueur);
  color:var(--encre);
  padding:10px 16px;
  transform:translateY(-200%);
  font:500 14px var(--sans)
}

.aller-contenu:focus {
  transform:none
}

.sanctuaire {
  max-width:1440px
}

.sanctuaire section {
  scroll-margin-top:30px
}

.genese {
  min-height:690px;
  height:min(780px,calc(100svh - 96px));
  position:relative;
  display:grid;
  grid-template-columns:1.02fr 1fr;
  align-items:center;
  padding-bottom:67px
}

.genese-texte {
  position:relative;
  z-index:2;
  padding-top:20px
}

.sur-titre {
  font:400 9px/1.6 var(--mono);
  letter-spacing:.16em;
  color:var(--lueur);
  display:flex;
  gap:12px;
  align-items:center
}

.etoile {
  color:var(--lueur);
  font-size:20px
}

.genese h1 {
  font-size:clamp(53px,5.8vw,84px);
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:300;
  margin:26px 0 27px;
  white-space:nowrap
}

.genese h1 em {
  color:var(--lueur);
  font-weight:300
}

.genese-intro {
  font:400 13px/1.95 var(--sans);
  max-width:400px;
  color:#65665b;
  margin-bottom:29px
}

.genese-intro strong {
  font-weight:400;
  color:#35392f
}

.genese-actions {
  display:flex;
  align-items:center;
  gap:26px
}

.invocation {
  gap:15px;
  white-space:nowrap
}

.invocation .fleche {
  font-size:21px;
  margin-left:12px;
  font-weight:400
}

.play-icon {
  font-size:22px
}

.lien-rituel {
  font:500 10px/1.5 var(--sans);
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  gap:15px;
  align-items:center
}

.lien-rituel span {
  font-size:17px;
  color:var(--lueur)
}

.entree-libre {
  font:400 9px/1.6 var(--mono);
  color:var(--brume);
  margin:16px 0 0;
  display:flex;
  align-items:center;
  gap:10px
}

.entree-libre i {
  width:2px;
  height:2px;
  border-radius:50%;
  background:#677071
}

.genese-bas {
  position:absolute;
  bottom:26px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  font:400 8px/1.5 var(--mono);
  letter-spacing:.15em;
  color:var(--brume-2)
}

.genese-bas a {
  text-decoration:none;
  color:#626458;
  display:flex;
  gap:15px
}

.genese-bas a span {
  color:var(--lueur)
}

.chapitre {
  border-top:1px solid var(--trait);
  padding:23px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  font:400 8px/1.5 var(--mono);
  letter-spacing:.17em;
  color:var(--brume);
  text-transform:uppercase
}

.chapitre>span:first-child {
  color:var(--lueur)
}

.chapitre a {
  color:var(--os-2);
  text-decoration:none
}

.offrande {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:65px;
  padding:20px 0 65px;
  align-items:center
}

.monde-apercu {
  height:365px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,#34322d,#101719 65%);
  border:1px solid #45474340
}

.monde-palier:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#070b0dbb,transparent 30%,transparent 70%,#070b0dbb),linear-gradient(0deg,#070b0ddd,transparent 40%);
  pointer-events:none
}

.ascenseur {
  position:absolute;
  left:27%;
  right:27%;
  top:20%;
  bottom:10%;
  background:#1c2221;
  box-shadow:0 0 0 9px #0c1112,0 0 0 10px #4b504a,0 0 35px #c6cbbc11
}

.portes {
  position:absolute;
  inset:18% 8% 0;
  display:flex;
  border:1px solid #62685c
}

.portes i {
  width:50%;
  height:100%;
  background:linear-gradient(90deg,#202a29,#303834 80%,#53594d);
  border-right:1px solid #070b09
}

.portes i+i {
  background:linear-gradient(90deg,#51574c,#2c3532 20%,#202a29)
}

.etage {
  position:absolute;
  left:50%;
  top:5%;
  transform:translateX(-50%);
  font:400 11px var(--mono);
  letter-spacing:.2em;
  color:#e88963;
  text-shadow:0 0 12px #ff602d
}

.cabine-lumiere {
  position:absolute;
  top:18%;
  left:9%;
  right:9%;
  height:2px;
  background:#e3e1b9;
  box-shadow:0 0 18px 5px #e3e1b930
}

.sol-cabine {
  position:absolute;
  top:90%;
  left:0;
  width:100%;
  height:40%;
  background:repeating-linear-gradient(90deg,transparent 0 58px,#6d756020 59px 60px),repeating-linear-gradient(0deg,transparent 0 38px,#6d756020 39px 40px);
  transform:perspective(140px) rotateX(50deg);
  transform-origin:top
}

.apercu-numero,.apercu-bas {
  position:absolute;
  z-index:1;
  font:400 8px var(--mono);
  letter-spacing:.18em;
  color:#c1c2ac
}

.apercu-numero {
  top:23px;
  left:25px
}

.apercu-bas {
  bottom:22px;
  left:25px;
  color:#929e92;
  font-size:7px
}

.apercu-sceau {
  width:70%;
  margin:0 auto
}

.offrande-texte h2 {
  font-size:76px;
  line-height:1.2;
  margin:11px 0 12px;
  letter-spacing:-.05em;
  font-weight:300
}

.offrande-texte h2>span {
  color:var(--lueur)
}

.offrande-accroche {
  font:400 14px/1.9 var(--sans);
  color:var(--os-2);
  max-width:350px;
  margin-bottom:20px
}

.jeu-details {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font:400 7px/1.5 var(--mono);
  letter-spacing:.08em;
  color:var(--brume);
  margin-bottom:25px
}

.temps-restant {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:24px;
  font:400 7px/1.4 var(--mono);
  letter-spacing:.12em;
  color:var(--brume)
}

.temps-restant b {
  font-weight:400;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--lueur);
  font-variant-numeric:tabular-nums
}

.section-intro {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  padding:25px 0 43px
}

.section-intro h2,.influence h2 {
  font-size:clamp(35px,3.6vw,51px);
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:300
}

.section-intro h2 em,.influence h2 em {
  color:var(--lueur);
  font-weight:300
}

.section-intro>p {
  font:400 12px/1.9 var(--sans);
  color:var(--brume);
  max-width:330px;
  margin:0
}

.etapes-pacte {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-bottom:85px
}

.etapes-pacte article {
  position:relative;
  padding:10px 34px 0;
  border-right:1px solid var(--trait)
}

.etapes-pacte article:first-child {
  padding-left:0
}

.etapes-pacte article:last-child {
  border:0;
  padding-right:0
}

.numero-etape {
  position:absolute;
  right:30px;
  top:18px;
  color:var(--brume-2);
  font:400 9px var(--mono)
}

.symbole-etape {
  font:300 45px/1 var(--serif);
  color:var(--lueur);
  height:72px
}

.symbole-curseurs {
  font-size:48px
}

.etapes-pacte h3 {
  font-size:28px;
  margin-bottom:15px
}

.etapes-pacte p {
  font:400 12px/1.95 var(--sans);
  color:var(--brume);
  max-width:290px;
  min-height:92px
}

.note-etape {
  font:400 7px/1.5 var(--mono);
  letter-spacing:.13em;
  color:var(--lueur)
}

.influence-grille {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  padding:40px 0 85px
}

.influence-intro {
  padding-top:24px
}

.influence-intro h2 {
  font-size:58px;
  margin:24px 0
}

.influence-intro>p:not(.sur-titre) {
  font:400 13px/1.9 var(--sans);
  color:var(--brume);
  max-width:350px
}

.oracle {
  border-left:1px solid var(--lueur-b);
  padding:2px 0 2px 22px;
  margin:32px 0 23px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  min-height:90px
}

.oracle p {
  font:italic 300 22px/1.5 var(--serif);
  color:var(--lueur);
  margin:0;
  max-width:290px
}

.influence-intro .demo-mention {
  font-size:10px!important;
  color:var(--brume);
  max-width:300px!important;
  margin-bottom:22px
}

.table-des-humeurs {
  border:1px solid var(--trait-2);
  background:linear-gradient(120deg,#fff9ec80,transparent 60%),#e9e2d4;
  padding:23px 29px 19px;
  position:relative
}

.table-des-humeurs:before,.table-des-humeurs:after {
  content:'+';
  position:absolute;
  color:var(--lueur);
  font:400 15px var(--mono);
  top:-9px;
  left:-5px
}

.table-des-humeurs:after {
  top:auto;
  left:auto;
  right:-5px;
  bottom:-9px
}

.humeurs-tete {
  display:flex;
  gap:9px;
  align-items:center;
  font:400 8px/1.5 var(--mono);
  letter-spacing:.11em;
  padding-bottom:15px;
  border-bottom:1px solid var(--trait);
  color:var(--os-2)
}

.humeurs-tete button {
  margin-left:auto;
  background:transparent;
  border:0;
  font:400 8px/1.5 var(--sans);
  color:var(--brume);
  cursor:pointer;
  padding:8px 0 8px 8px
}

.humeurs-tete button:hover {
  color:var(--lueur)
}

.humeur-ligne {
  padding:14px 0 9px
}

.humeur-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:500 11px/1.3 var(--sans)
}

.humeur-label output {
  font:400 10px/1 var(--mono);
  color:var(--lueur)
}

.humeur-poles {
  display:flex;
  justify-content:space-between;
  font:400 8px/1.2 var(--sans);
  color:var(--brume)
}

.humeur-ligne input {
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  height:22px;
  margin:5px 0;
  background:transparent;
  cursor:ew-resize
}

.humeur-ligne input::-webkit-slider-runnable-track {
  height:2px;
  background:linear-gradient(to right,var(--lueur) var(--valeur),#c2b7a2 var(--valeur));
  border-radius:0
}

.humeur-ligne input::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:9px;
  height:9px;
  margin-top:-3.5px;
  border:1px solid #a65f36;
  background:var(--lueur);
  border-radius:50%;
  box-shadow:0 0 0 4px #a65f360e,0 1px 3px #5b392526
}

.humeur-ligne input::-moz-range-track {
  height:2px;
  background:#c2b7a2
}

.humeur-ligne input::-moz-range-progress {
  height:2px;
  background:var(--lueur)
}

.humeur-ligne input::-moz-range-thumb {
  width:9px;
  height:9px;
  border:1px solid #a65f36;
  background:var(--lueur);
  border-radius:50%
}

.humeurs-bas {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--trait);
  margin-top:14px;
  padding-top:14px;
  font:400 7px/1.4 var(--mono);
  letter-spacing:.1em;
  color:var(--brume-2)
}

.traces-grille {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px
}

.trace {
  display:flex;
  align-items:center;
  gap:20px;
  border:1px solid var(--trait);
  padding:24px;
  text-decoration:none;
  background:#ede7db66;
  transition:background .3s,border-color .3s
}

.trace:hover {
  border-color:var(--lueur-b);
  background:#e7decd;
  color:var(--os)
}

.trace-art {
  width:100px;
  flex:0 0 100px;
  display:flex;
  align-items:center;
  justify-content:center
}

.trace-art svg {
  width:100%;
  transition:transform 1s
}

.trace:hover svg {
  transform:rotate(15deg)
}

.trace .sur-titre {
  font-size:7px
}

.trace h3 {
  font-size:26px;
  margin:8px 0 10px
}

.trace p {
  font:400 10px/1.8 var(--sans);
  color:var(--brume);
  margin:0;
  max-width:250px
}

.trace-fleche {
  margin-left:auto;
  align-self:flex-start;
  color:var(--lueur);
  font-size:20px
}

.trace-demain {
  border-style:dashed
}

.trace-demain .trace-art span {
  font-size:75px;
  color:#ad835e
}

.veilleurs {
  margin-top:25px;
  padding:24px 0;
  display:flex;
  align-items:center;
  gap:15px
}

.veilleurs p {
  font:400 10px/1.8 var(--sans);
  color:var(--brume);
  margin:0
}

.veilleurs p span {
  color:var(--brume-2)
}

.veilleurs a {
  font:400 9px/1.5 var(--sans);
  color:var(--os-2);
  margin-left:auto;
  white-space:nowrap;
  text-decoration:none
}

.dernier-appel {
  text-align:center;
  padding:100px 0 30px;
  background:radial-gradient(ellipse at 50% 60%,#b9773110,transparent 65%)
}

.dernier-appel>.etoile {
  font-size:30px;
  display:block;
  margin-bottom:23px
}

.dernier-appel>p {
  font:400 12px var(--sans);
  color:var(--brume);
  margin-bottom:25px
}

.dernier-appel h2 {
  font-size:clamp(42px,5vw,68px);
  line-height:1.15;
  font-weight:300;
  margin:0 0 30px;
  letter-spacing:-.04em
}

.dernier-appel h2 em {
  color:var(--lueur);
  font-weight:300
}

.dernier-appel>.sur-titre {
  display:block;
  margin:25px 0 0;
  font-size:7px;
  color:var(--brume)
}

.attente {
  padding:60px 0;
  text-align:center
}

.attente h2 {
  font-size:42px
}

.attente p {
  margin:20px 0;
  color:var(--brume)
}

.attente b {
  color:var(--lueur);
  font-family:var(--mono)
}

@media(min-width:1600px) {
  .genese {
    height:800px;
    min-height:760px
  }
  .genese h1 {
    font-size:90px
  }
}

@media(max-width:1150px) {
  .entete-heure {
    display:none
  }
  .genese h1 {
    font-size:6vw
  }
  .genese-actions {
    gap:18px
  }
  .genese-actions .lien-rituel {
    font-size:9px;
    gap:8px
  }
  .invocation {
    padding:0 18px
  }
  .offrande {
    gap:40px
  }
  .influence-grille {
    gap:55px
  }
  .trace {
    padding:20px;
    gap:14px
  }
  .trace-art {
    width:75px;
    flex-basis:75px
  }
  .genese-intro {
    max-width:340px
  }
}

@media(max-width:800px) {
  .entete {
    gap:15px;
    margin:0 22px;
    padding:22px 0
  }
  .marque small {
    font-size:6px
  }
  .marque span {
    font-size:19px
  }
  .nav {
    gap:18px
  }
  .nav a {
    font-size:10px
  }
  .genese {
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
    padding-top:42px;
    padding-bottom:66px
  }
  .genese-texte {
    text-align:center;
    padding:0
  }
  .genese-texte>.sur-titre {
    justify-content:center
  }
  .genese h1 {
    font-size:clamp(49px,8.8vw,75px);
    margin-top:22px;
    line-height:1.08
  }
  .genese-intro {
    max-width:460px;
    margin-left:auto;
    margin-right:auto;
    font-size:13px
  }
  .genese-actions,.entree-libre {
    justify-content:center
  }
  .genese-bas {
    font-size:6px;
    bottom:20px
  }
  .genese-bas>span {
    max-width:200px
  }
  .offrande {
    gap:30px;
    grid-template-columns:1fr 1fr
  }
  .monde-apercu {
    height:330px
  }
  .offrande-texte h2 {
    font-size:58px
  }
  .offrande-accroche {
    font-size:12px
  }
  .jeu-details {
    gap:9px;
    font-size:6px
  }
  .temps-restant {
    flex-wrap:wrap;
    gap:8px
  }
  .section-intro {
    display:block
  }
  .section-intro>p {
    margin-top:22px;
    max-width:none
  }
  .etapes-pacte article {
    padding-right:20px;
    padding-left:20px
  }
  .etapes-pacte p {
    min-height:145px;
    font-size:11px
  }
  .note-etape {
    font-size:6px
  }
  .influence-grille {
    gap:30px
  }
  .influence-intro h2 {
    font-size:46px
  }
  .table-des-humeurs {
    padding:20px
  }
  .humeurs-tete {
    font-size:6px;
    gap:6px
  }
  .humeurs-tete button {
    font-size:7px
  }
  .trace {
    padding:18px;
    gap:12px
  }
  .trace-art {
    width:55px;
    flex-basis:55px
  }
  .trace h3 {
    font-size:22px
  }
  .trace p {
    font-size:9px
  }
  .veilleurs {
    flex-wrap:wrap
  }
  .veilleurs a {
    margin-left:35px
  }
  .section-intro h2 {
    font-size:40px
  }
}

@media(max-width:560px) {
  .entete {
    flex-wrap:wrap;
    justify-content:center;
    padding:20px 0 13px;
    gap:17px
  }
  .marque {
    margin-right:auto
  }
  .marque small {
    display:none
  }
  .nav {
    width:100%;
    justify-content:space-between;
    gap:12px;
    overflow:visible
  }
  .nav a {
    font-size:10px;
    padding:6px 0
  }
  .nav a[aria-current]::after {
    bottom:0
  }
  .genese {
    padding-top:35px
  }
  .genese h1 {
    font-size:12.1vw;
    letter-spacing:-.05em
  }
  .genese-texte>.sur-titre {
    font-size:7px;
    letter-spacing:.1em
  }
  .genese-intro {
    font-size:12px;
    max-width:330px
  }
  .genese-actions {
    gap:18px;
    flex-direction:column
  }
  .genese-actions .invocation {
    width:min(295px,100%)
  }
  .genese-actions .lien-rituel {
    font-size:10px
  }
  .entree-libre {
    font-size:8px;
    margin-top:15px
  }
  .chapitre {
    font-size:6px;
    letter-spacing:.09em;
    padding:20px 0;
    gap:12px
  }
  .offrande {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:10px;
    padding-bottom:55px
  }
  .monde-apercu {
    height:310px
  }
  .offrande-texte h2 {
    font-size:65px
  }
  .offrande-accroche {
    font-size:13px;
    max-width:330px
  }
  .offrande-texte>.sur-titre {
    font-size:8px
  }
  .jeu-details {
    font-size:7px;
    gap:16px
  }
  .temps-restant {
    gap:18px
  }
  .section-intro {
    padding:20px 0 30px
  }
  .section-intro h2 {
    font-size:34px
  }
  .section-intro>p {
    font-size:12px
  }
  .etapes-pacte {
    grid-template-columns:1fr;
    padding-bottom:40px
  }
  .etapes-pacte article,.etapes-pacte article:first-child,.etapes-pacte article:last-child {
    padding:25px 0 25px 60px;
    border-right:0;
    border-bottom:1px solid var(--trait)
  }
  .etapes-pacte article:last-child {
    border-bottom:0
  }
  .symbole-etape {
    position:absolute;
    left:0;
    top:26px;
    font-size:32px
  }
  .numero-etape {
    right:0;
    top:29px
  }
  .etapes-pacte p {
    min-height:0;
    max-width:none;
    font-size:12px
  }
  .etapes-pacte h3 {
    font-size:28px
  }
  .note-etape {
    font-size:7px
  }
  .influence-grille {
    grid-template-columns:1fr;
    padding-top:0;
    padding-bottom:55px;
    gap:35px
  }
  .influence-intro h2 {
    font-size:48px
  }
  .oracle {
    min-height:75px;
    margin-top:25px
  }
  .influence-intro>p:not(.sur-titre) {
    max-width:none
  }
  .table-des-humeurs {
    padding:22px 24px
  }
  .humeurs-tete {
    font-size:7px
  }
  .humeur-label {
    font-size:12px
  }
  .humeur-poles {
    font-size:9px
  }
  .humeurs-tete button {
    font-size:9px
  }
  .humeur-ligne {
    padding-top:17px
  }
  .humeur-ligne input {
    height:28px
  }
  .humeur-ligne input::-webkit-slider-thumb {
    width:13px;
    height:13px;
    margin-top:-5.5px
  }
  .humeurs-bas {
    font-size:6px
  }
  .traces-grille {
    grid-template-columns:1fr;
    gap:14px
  }
  .trace {
    padding:22px 18px
  }
  .trace-art {
    width:75px;
    flex-basis:75px
  }
  .trace h3 {
    font-size:25px
  }
  .trace p {
    font-size:10px
  }
  .veilleurs {
    gap:10px;
    margin-top:15px
  }
  .veilleurs p {
    flex:1
  }
  .veilleurs p span {
    display:block
  }
  .veilleurs a {
    margin-left:29px
  }
  .dernier-appel {
    padding-top:65px
  }
  .pied {
    margin-top:45px;
    gap:15px
  }
  .pied .etiquette {
    font-size:7px
  }
  .tete-page h1 {
    font-size:60px
  }
  .piste .pole {
    font-family:var(--sans)
  }
  .chiffres>div {
    padding:22px 18px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .trace-art svg,.bouton {
    transition:none
  }
  .apparait {
    opacity:1;
    transform:none
  }
}

/* La nuit se ferme réellement : les appels à jouer suivent son état. */
.fermeture-jeu,.monde-scelle {
  font:400 10px/1.8 var(--sans);
  color:var(--brume);
  margin:15px 0
}

.fermeture-jeu b {
  color:var(--lueur);
  font-weight:500
}

.monde-scelle {
  max-width:350px
}

.invocation>.etoile {
  color:var(--encre)
}

/* L'atelier s'ouvre à la lumière du jour. */
.genese {
  grid-template-columns:1fr 1fr;
  gap:30px;
  min-height:700px;
  height:auto;
  padding-top:55px;
  padding-bottom:92px;
}

.genese h1 {
  font-size:clamp(50px,5.6vw,78px);
  font-weight:350;
  line-height:1.1;
}

.genese-texte {
  padding-top:0;
}

.genese-intro {
  font-size:14px;
  max-width:405px;
}

.genese-actions {
  gap:22px;
}

.genese-bas {
  bottom:28px;
}

.bouton {
  --encre-b:#fff8eb;
  color:var(--encre-b);
  border-color:var(--fond);
}

.bouton:hover {
  color:var(--encre-b);
}

.bouton.fantome {
  color:var(--os);
  border-color:var(--trait-2);
}

.bouton.fantome:hover {
  color:var(--lueur);
}

.aller-contenu {
  color:#fff8eb;
}

.forge {
  position:relative;
  width:100%;
  margin:0;
  aspect-ratio:auto;
  isolation:isolate;
  --regard-x:0px;
  --regard-y:0px;
}

.forge-cadre {
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:45% 45% 4px 4px;
  overflow:hidden;
  background:#e5d5b9;
  box-shadow:0 16px 32px -20px #745a3530;
}

.forge-cadre::after {
  content:'';
  position:absolute;
  inset:0;
  border:1px solid #76553718;
  border-radius:inherit;
  pointer-events:none;
}

.forge-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.025) translate(var(--regard-x),var(--regard-y));
  transition:transform 1.2s ease-out;
}

.forge .poussiere {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.65;
  pointer-events:none;
}

.forge-cartouche {
  position:relative;
  margin:-29px 24px 0;
  z-index:2;
  padding:20px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#474737;
  background:#f9f5eb;
  border:1px solid #b9a68a66;
  box-shadow:0 6px 18px #513b1610;
  font:500 8px/1.5 var(--mono);
  letter-spacing:.07em;
}

.forge-estampille {
  margin-left:auto;
  border-left:1px solid var(--trait-2);
  padding-left:16px;
  white-space:nowrap;
  color:var(--lueur);
}

.forge-legende {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
  font:400 7px/1.4 var(--mono);
  letter-spacing:.1em;
  color:var(--brume);
}

.sur-titre {
  font-size:10px;
}

.chapitre {
  font-size:9px;
}

.section-intro>p,.etapes-pacte p {
  font-size:13px;
}

.etapes-pacte h3 {
  font-weight:400;
}

.symbole-etape {
  color:#ac6338;
}

.note-etape {
  font-size:8px;
}

.influence-intro h2 {
  font-size:clamp(37px,4vw,53px);
}

.humeur-ligne input {
  cursor:pointer;
}

.humeur-ligne input::-webkit-slider-thumb {
  width:12px;
  height:12px;
  margin-top:-5px;
  background:linear-gradient(135deg,#b97448,#8f4a2e);
  border-radius:2px;
}

.humeur-ligne input::-moz-range-thumb {
  width:12px;
  height:12px;
  background:linear-gradient(135deg,#b97448,#8f4a2e);
  border-radius:2px;
}

.humeur-label {
  font-size:12px;
}

.humeur-poles {
  font-size:10px;
}

.humeurs-tete {
  font-size:9px;
}

.humeurs-tete button {
  font-size:10px;
}

.humeurs-bas {
  font-size:8px;
}

.oracle p {
  font-size:24px;
}

.trace .sceau,.frise .sceau,.carte .sceau,.marge .sceau,.fiche-tete .sceau-cadre .sceau {
  filter:brightness(.62) saturate(.65);
}

.trace p {
  font-size:12px;
}

.trace .sur-titre {
  font-size:8px;
}

.trace-demain .trace-art span {
  color:#9e653e;
}

.dernier-appel {
  background:radial-gradient(ellipse at 50% 60%,#cf985929,transparent 65%);
}

.pied {
  border-color:var(--trait-2);
}

/* La salle reste adaptée aux jeux et aux fenêtres de vote nocturnes. */
.page-jouer {
  color-scheme:dark;
  --encre:#0a0d10;
  --encre-2:#101417;
  --encre-3:#161b1f;
  --encre-4:#22292d;
  --os:#eee9df;
  --os-2:#b5b6b3;
  --brume:#959b9b;
  --brume-2:#606b6c;
  --trait:rgba(208,203,187,.12);
  --trait-2:rgba(208,203,187,.23);
  --lueur:#e6b383;
  --braise:#c98150;
  --voile:#493127;
  --nuit:#101315;
  --lueur-a:rgba(219,156,101,.1);
  --lueur-b:rgba(219,156,101,.3);
}

.page-jouer .bouton {
  --encre-b:#0a0d10;
}

@media(min-width:1600px) {
  .genese {
    min-height:750px;
    height:auto;
  }
}

@media(max-width:1150px) {
  .genese {
    gap:26px;
  }
  .genese h1 {
    font-size:5.6vw;
  }
  .genese-actions {
    align-items:flex-start;
    gap:17px;
    flex-direction:column;
  }
  .forge-cartouche {
    margin-left:14px;
    margin-right:14px;
    padding:15px;
    font-size:7px;
  }
  .forge-estampille {
    padding-left:10px;
  }
}

@media(max-width:800px) {
  .genese {
    grid-template-columns:1fr;
    padding-top:40px;
    padding-bottom:70px;
    gap:38px;
    min-height:0;
  }
  .genese h1 {
    font-size:clamp(50px,8.5vw,70px);
  }
  .genese-intro {
    margin-left:auto;
    margin-right:auto;
  }
  .genese-actions {
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  .forge {
    max-width:490px;
    width:100%;
    margin:0 auto;
  }
  .forge-cartouche {
    font-size:8px;
  }
  .forge-legende {
    font-size:7px;
  }
  .humeurs-tete {
    font-size:7px;
  }
  .humeurs-tete button {
    font-size:8px;
  }
  .humeurs-bas {
    font-size:6px;
  }
}

@media(max-width:560px) {
  .genese {
    gap:32px;
  }
  .genese h1 {
    font-size:11.7vw;
  }
  .genese-intro {
    font-size:13px;
    max-width:335px;
  }
  .genese-actions {
    flex-direction:column;
    gap:16px;
  }
  .forge {
    left:auto;
    transform:none;
    width:100%;
    margin:0;
  }
  .forge-cadre {
    border-radius:43% 43% 3px 3px;
  }
  .forge-cartouche {
    margin:-22px 10px 0;
    padding:16px 12px;
    gap:8px;
    font-size:6px;
  }
  .forge-legende {
    font-size:5.5px;
    letter-spacing:.06em;
  }
  .chapitre {
    font-size:7px;
  }
  .influence-intro h2 {
    font-size:40px;
  }
  .humeurs-tete {
    font-size:8px;
  }
  .humeurs-tete button {
    font-size:9px;
  }
  .humeur-label {
    font-size:13px;
  }
  .humeurs-bas {
    font-size:7px;
  }
  .trace p {
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .forge-image {
    transition:none;
    transform:none;
  }
}