:root {
  --encre: #0c0a08;
  --encre-2: #16120e;
  --encre-3: #221c16;
  --parchemin: #ecdfc3;
  --parchemin-2: #b9a98a;
  --laiton: #c9a45c;
  --laiton-2: #8c6f36;
  --vert-de-gris: #6fa597;
  --rouge: #e0634a;
  --trait: rgba(236, 223, 195, .14);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--encre); color: var(--parchemin);
  font: 400 19px/1.5 var(--serif);
  -webkit-font-smoothing: antialiased;
}
/* Grain argentique sur tout le site : bruit SVG, léger tremblement image par image */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: overlay;
  animation: grain .9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(4%, 3%); } 83% { transform: translate(-1%, 4%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

h1, h2, h3 { font-weight: 400; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(44px, 8vw, 104px); letter-spacing: -.01em; }
h1 em, h2 em { color: var(--laiton); }
h2 { font-size: clamp(34px, 5vw, 60px); }
h3 { font-size: 28px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

.surtitre, .etiquette, .mesure, .compteur, .note, .pied, .objet__meta {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--parchemin-2);
}
.surtitre { color: var(--laiton); margin: 0 0 14px; }
.chapeau { font-size: 22px; color: var(--parchemin-2); max-width: 36ch; margin: 18px 0 0; }

.bouton {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  background: var(--laiton); color: var(--encre); border: 0; border-radius: 2px;
  font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--parchemin); }
.bouton:disabled { opacity: .4; cursor: default; }
.lien {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--parchemin-2);
  font: 400 13px var(--mono); text-decoration: underline; text-underline-offset: 3px;
}
.lien:hover { color: var(--parchemin); }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }

/* ───────── 1. Salle obscure ───────── */
.salle {
  position: relative; min-height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: minmax(300px, 38%) 1fr; grid-template-rows: 1fr auto;
  background: radial-gradient(120% 90% at 70% 40%, #120e0a, var(--encre) 70%);
}
.salle__titre {
  align-self: center; z-index: 3; padding: 40px clamp(16px, 5vw, 72px); pointer-events: none;
}
.salle__scene { position: relative; min-height: calc(100vh - 72px); cursor: none; touch-action: pan-y; }
.nuit { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cartels { position: absolute; inset: 0; pointer-events: none; }
.cartel-main {
  inset: 28px auto auto 28px; max-width: 280px; display: grid; gap: 6px;
  font: 400 11px/1.5 var(--mono); letter-spacing: .05em; color: var(--parchemin);
}
.cartel-main p { margin: 0; opacity: 0; transform: translateY(6px); transition: opacity 1.2s, transform 1.2s; }
.cartel-main p.revele { opacity: 1; transform: none; }
.cartel-main b { color: var(--laiton); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.cartel-main i { font-style: normal; color: var(--vert-de-gris); }
.cartel {
  position: absolute; transform: translate(-50%, 0); width: max-content; max-width: 170px; text-align: center;
  font: 400 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--parchemin);
  opacity: 0; transition: opacity .9s;
}
.cartel b { display: block; color: var(--laiton); font-weight: 500; }
.cartel i { font-style: normal; color: var(--vert-de-gris); }
.cartel.revele { opacity: 1; }
.cartel--vide { color: var(--vert-de-gris); pointer-events: auto; cursor: pointer; opacity: .8; }
.cartel--vide:hover { color: var(--parchemin); }
.salle__charge {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0;
  font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--parchemin-2);
}
.salle__pied {
  grid-column: 1 / -1; z-index: 3;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 18px clamp(16px, 5vw, 72px); border-top: 1px solid var(--trait);
}
@media (max-width: 860px) {
  .salle { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .salle__titre { padding-bottom: 0; }
  .salle__scene { min-height: 0; height: 130vw; max-height: 900px; }
}
.salle__pied .bouton { margin-left: auto; }
.compteur b { color: var(--laiton); font-weight: 500; }

/* ───────── Le laboratoire (bento) ───────── */
.bento { padding: clamp(56px, 9vw, 120px) clamp(16px, 5vw, 72px); background: var(--encre); border-top: 1px solid var(--trait); }
.bento__grille {
  display: grid; gap: 12px; margin-top: 40px;
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto);
  grid-template-areas:
    "neb neb ech mot"
    "neb neb ent mot"
    "col axe axe cta";
}
.case {
  --mx: -500px; --my: -500px;
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border: 1px solid var(--trait); border-radius: 2px; color: inherit; text-decoration: none;
  background:
    radial-gradient(320px circle at var(--mx) var(--my), rgba(201,164,92,.11), transparent 65%),
    var(--encre-2);
}
.case::after { /* bord qui s'allume près du pointeur */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(201,164,92,.7), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.case p { margin: 0; color: var(--parchemin-2); font-size: 17px; }
.case .etiquette { margin: 0; color: var(--vert-de-gris); }
.case h3 { font-size: 26px; }
.case--nebuleuse { grid-area: neb; min-height: 440px; justify-content: flex-end; background: #070605; }
.case--nebuleuse canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.case__texte { position: relative; max-width: 380px; padding: 16px 18px; background: linear-gradient(transparent, rgba(7,6,5,.92) 30%); pointer-events: none; }
.case__texte h3 { font-size: 34px; margin: 6px 0 8px; }
.case--echelle { grid-area: ech; }
.echelle { display: flex; align-items: flex-end; justify-content: space-between; flex: 1; }
.echelle__rapport { font: 500 64px/1 var(--mono); color: var(--laiton); letter-spacing: -.04em; }
.echelle__barre { width: 14px; height: 100px; border: 1px solid var(--trait); display: flex; align-items: flex-end;
  background: repeating-linear-gradient(to top, var(--trait) 0 1px, transparent 1px 10px); }
.echelle__barre i { display: block; width: 100%; background: var(--vert-de-gris); transition: height .8s cubic-bezier(.2,.8,.2,1); }
.echelle__legende { font: 400 12px/1.5 var(--mono) !important; }
.case--moteurs { grid-area: mot; }
.terminal {
  flex: 1; margin: 6px 0 0; padding: 14px; background: #070605; border: 1px solid var(--trait); border-radius: 2px;
  font: 400 12px/1.8 var(--mono); color: var(--parchemin); white-space: pre-wrap; word-break: break-word; min-height: 250px;
}
.terminal .cmd { color: var(--laiton); } .terminal .res { color: var(--vert-de-gris); }
.terminal::after { content: '▍'; color: var(--laiton); animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.case--entures { grid-area: ent; }
.entures { width: 100%; flex: 1; min-height: 90px; }
.entures path { fill: none; stroke: #ff6b5a; stroke-width: .5; stroke-dasharray: var(--l); stroke-dashoffset: var(--l); }
.case--entures.trace path { transition: stroke-dashoffset 2.4s ease-in-out; stroke-dashoffset: 0; }
.case--collections { grid-area: col; }
.grand { font: 500 56px/1 var(--mono) !important; color: var(--parchemin) !important; margin: auto 0 !important; }
.case--axes { grid-area: axe; justify-content: space-between; }
.axes { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: clamp(30px, 3.4vw, 48px) !important; line-height: 1.1; color: var(--parchemin) !important; }
.axes span:nth-child(2) { color: var(--vert-de-gris); font-style: italic; }
.axes span:nth-child(3) { color: var(--laiton); }
.case--cta { grid-area: cta; background: var(--laiton); color: var(--encre); justify-content: space-between; }
.case--cta .etiquette { color: var(--encre); opacity: .7; }
.case--cta h3 { font-size: 30px; }
.case--cta .fleche { font-size: 40px; align-self: flex-end; transition: transform .3s; }
.case--cta:hover .fleche { transform: translateX(6px); }
.case--cta::after { display: none; }
@media (max-width: 1000px) {
  .bento__grille { grid-template-columns: 1fr 1fr; grid-template-areas: "neb neb" "ech mot" "ent mot" "col axe" "cta cta"; }
}
@media (max-width: 600px) {
  .bento__grille { grid-template-columns: 1fr; grid-template-areas: "neb" "ech" "mot" "ent" "col" "axe" "cta"; }
  .case--nebuleuse { min-height: 380px; }
}

/* ───────── 2. Atelier ───────── */
.atelier, .fabrique { padding: clamp(56px, 9vw, 120px) clamp(16px, 5vw, 72px); }
.atelier { background: var(--encre-2); border-top: 1px solid var(--trait); }
.atelier__entete { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-end; }
.reglages { display: flex; gap: 28px; flex-wrap: wrap; }
.reglage { display: grid; gap: 8px; }
.reglage--ligne { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.champ { display: inline-flex; align-items: baseline; gap: 6px; font: 400 15px var(--mono); color: var(--parchemin-2); }
.champ input, select {
  width: 72px; background: transparent; border: 0; border-bottom: 1px solid var(--trait);
  padding: 4px 0; font: 500 18px var(--mono); color: var(--parchemin);
}
select { width: auto; font-size: 14px; background: var(--encre-2); }
.segment { display: inline-flex; border: 1px solid var(--laiton-2); border-radius: 2px; }
.segment button {
  background: none; border: 0; padding: 8px 18px; cursor: pointer;
  font: 500 16px var(--mono); color: var(--parchemin-2);
}
.segment button[aria-checked="true"] { background: var(--laiton); color: var(--encre); }

.atelier__corps { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 28px; margin-top: 48px; }
@media (max-width: 860px) { .atelier__corps { grid-template-columns: 1fr; } }

.depot {
  display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 28px 16px; border: 1px dashed var(--laiton-2); border-radius: 2px;
  font-size: 15px; color: var(--parchemin-2); transition: background .2s, border-color .2s;
}
.depot strong { font-size: 22px; font-weight: 400; color: var(--parchemin); }
.depot.survol { background: rgba(201,164,92,.08); border-color: var(--laiton); }
.depot__icone {
  width: 34px; height: 34px; border: 1px solid var(--laiton); border-radius: 50%;
  position: relative; margin-bottom: 4px;
}
.depot__icone::before, .depot__icone::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--laiton);
  width: 14px; height: 1px; transform: translate(-50%, -50%);
}
.depot__icone::after { transform: translate(-50%, -50%) rotate(90deg); }
#exemples { margin: 12px 0 0; }

#moteurs { margin-top: 14px; color: var(--vert-de-gris); }
.collections { display: grid; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--trait); }
.collections__champ { display: flex; gap: 8px; }
.collections__champ input {
  flex: 1; min-width: 0; background: var(--encre); border: 1px solid var(--trait); border-radius: 2px;
  padding: 8px 10px; font-size: 17px;
}
.collections .note { margin: 0; text-transform: none; letter-spacing: .02em; line-height: 1.5; }
.trouvailles { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.trouvaille button {
  display: grid; gap: 4px; width: 100%; height: 100%; padding: 6px; text-align: left; cursor: pointer;
  background: var(--encre-3); border: 1px solid transparent; border-radius: 2px;
}
.trouvaille button:hover { border-color: var(--laiton); }
.trouvaille img, .trouvaille__3d { width: 100%; aspect-ratio: 1; object-fit: contain; background: #0006; }
.trouvaille__3d { display: grid; place-items: center; font: 500 20px var(--mono); color: var(--vert-de-gris); border: 1px dashed var(--vert-de-gris); }
.trouvaille strong { font-size: 14px; font-weight: 400; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trouvaille small { font: 400 10px/1.3 var(--mono); color: var(--parchemin-2); }
.trouvaille.ajoutee { opacity: .45; }
.objet__meta .encours { color: var(--laiton); }
.objets { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; max-height: 620px; overflow: auto; }
.objet {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px;
  background: var(--encre-3); border: 1px solid transparent; border-radius: 2px;
}
.objet.actif { border-color: var(--laiton-2); }
.objet__vignette { width: 64px; height: 64px; object-fit: contain; background: #0006; }
.objet__nom {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid transparent;
  font-size: 20px; padding: 0; color: var(--parchemin);
}
.objet__nom:hover, .objet__nom:focus { border-bottom-color: var(--trait); outline: none; }
.objet__meta { margin-top: 2px; font-size: 11px; }
.objet__meta .alerte { color: var(--rouge); }
.objet__meta .ok { color: var(--vert-de-gris); }
.objet__taille { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 13px var(--mono); }
.objet__taille span { white-space: nowrap; color: var(--parchemin-2); }
.objet__taille input[type="range"] { flex: 1; accent-color: var(--laiton); }
.objet__taille output { min-width: 64px; text-align: right; color: var(--parchemin); }
.objet__actions { display: flex; gap: 14px; margin-top: 6px; }

.vitrine { display: grid; grid-template-rows: 1fr auto; min-height: 560px; border: 1px solid var(--trait); background: #070605; }
.vitrine__scene { position: relative; min-height: 520px; }
.vitrine__scene canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.vitrine__vide { position: absolute; inset: 0; margin: auto; height: max-content; text-align: center; color: var(--parchemin-2); font-style: italic; font-size: 22px; }
.vitrine__barre { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--trait); }
.bascule { font: 400 13px var(--mono); color: var(--parchemin-2); display: flex; gap: 8px; align-items: center; cursor: pointer; }
.bascule input { accent-color: var(--laiton); }

/* ───────── 3. Fabriquer ───────── */
.fabrique__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; }
.carte { padding: 28px; background: var(--encre-2); border: 1px solid var(--trait); border-radius: 2px; }
.carte p { color: var(--parchemin-2); font-size: 17px; }
.carte--commande { border-color: var(--laiton-2); }
.rouge { color: #ff6b5a; } .bleu { color: #7aa7ff; }
.liste-fichiers { display: grid; gap: 8px; margin-top: 18px; }
.liste-fichiers button {
  display: flex; justify-content: space-between; gap: 12px; text-align: left;
  background: var(--encre-3); border: 1px solid var(--trait); border-radius: 2px;
  padding: 10px 12px; cursor: pointer; font: 400 13px var(--mono);
}
.liste-fichiers button:hover { border-color: var(--laiton); }
.liste-fichiers button span:last-child { color: var(--parchemin-2); }
.liste-fichiers .vide { font: 400 13px var(--mono); color: var(--parchemin-2); }
.recap { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 18px 0; font: 400 14px var(--mono); }
.recap dt { color: var(--parchemin-2); }
.recap dd { margin: 0; text-align: right; }
.recap .total { color: var(--laiton); font-size: 18px; border-top: 1px solid var(--trait); padding-top: 8px; }
.devis { display: grid; gap: 10px; }
.devis input, .devis textarea {
  background: var(--encre); border: 1px solid var(--trait); border-radius: 2px; padding: 10px 12px; font-size: 17px;
}
.devis .bouton { justify-self: start; }

.pied { padding: 28px clamp(16px, 5vw, 72px); border-top: 1px solid var(--trait); text-transform: none; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cadre figcaption { transition: none; } }