html{color-scheme:light dark}body{margin:0}img{max-width:100%}

/* Layout: a print-shop sheet. One wide "fiche d'édition" for the photo on sale, then two prints side by side for the vote. Ink on paper, one red "sold" dot as the only accent. */
:root{
  --paper:#f3f0ea; --paper-2:#e9e5dc; --ink:#141311; --ink-2:#5a564f; --line:#cfc9bc;
  --red:#d3301f; --red-ink:#fff;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#15140f; --paper-2:#1f1d17; --ink:#efebe2; --ink-2:#a39d91; --line:#3a372f; --red:#e8402d; color-scheme:dark } }
:root[data-theme="dark"]{ --paper:#15140f; --paper-2:#1f1d17; --ink:#efebe2; --ink-2:#a39d91; --line:#3a372f; --red:#e8402d; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
.wrap{max-width:1100px;margin:0 auto}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.05;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
a{color:inherit}
img{max-width:100%;display:block}

header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:20px 28px;border-bottom:1px solid var(--ink)}
.brand{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.02em}
.brand span{color:var(--red)}
header .eyebrow{text-align:right}

.hero{padding-block:36px 8px}
.hero h1{font-size:clamp(40px,8vw,88px);font-weight:800;letter-spacing:-.03em}
.hero p{max-width:60ch;color:var(--ink-2);margin:14px 0 0;font-size:17px}

.fiche{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:start;padding-block:28px 40px;border-top:1px solid var(--line);margin-top:28px}
.fiche figure{margin:0;background:var(--paper-2);padding:clamp(12px,3vw,32px)}
.fiche figure img{width:100%;height:auto}
.fiche figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel{display:flex;flex-direction:column;gap:20px;min-width:0;position:sticky;top:env(safe-area-inset-top,0px)}
.panel h2{font-size:clamp(28px,4vw,40px);font-weight:800}
.panel .by{color:var(--ink-2);margin:6px 0 0}
dl.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px;border-top:1px solid var(--line);padding-top:16px}
dl.specs dt{color:var(--ink-2)}
dl.specs dd{margin:0;font-weight:500}
.price{display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.02em}
.price small{font-family:var(--body);font-weight:400;font-size:14px;color:var(--ink-2)}
.stock{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px}
.stock .bar{flex:1;height:6px;background:var(--line);overflow:hidden}
.stock .bar i{display:block;height:100%;background:var(--red)}
.btn{appearance:none;border:0;cursor:pointer;font:600 16px var(--body);padding:16px 22px;display:inline-flex;justify-content:center;align-items:center;gap:10px;text-decoration:none;transition:transform .08s}
.btn:active{transform:translateY(1px)}
.btn-buy{background:var(--ink);color:var(--paper);width:100%}
.btn-buy:hover{background:var(--red);color:var(--red-ink)}
.btn:focus-visible,.vote-btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.fine{font-size:13px;color:var(--ink-2);margin:0}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--red);vertical-align:middle;margin-right:6px}

/* Vote */
.vote{border-top:1px solid var(--ink);padding-block:32px 0}
.vote-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.vote-head h2{font-size:clamp(28px,5vw,48px);font-weight:800;letter-spacing:-.02em}
.vote-head p{margin:8px 0 0;color:var(--ink-2);max-width:52ch}
.deadline{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.cands{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.cand{display:flex;flex-direction:column;gap:12px;min-width:0}
.cand figure{margin:0;background:var(--paper-2);padding:clamp(10px,2vw,20px)}
.cand figure img{width:100%;height:auto}
.cand h3{font-size:22px;font-weight:800}
.cand .meta{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.vote-btn{appearance:none;cursor:pointer;background:transparent;border:1.5px solid var(--ink);color:var(--ink);font:600 15px var(--body);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:background .12s,color .12s}
.vote-btn:hover{background:var(--ink);color:var(--paper)}
.vote-btn[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--red-ink)}
.vote-btn:disabled{cursor:default;opacity:.6}
.result{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.result .bar{height:8px;background:var(--line);overflow:hidden}
.result .bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .5s}
.cand.leading .result .bar i{background:var(--red)}
.result .row{display:flex;justify-content:space-between}
.status{margin-top:18px;font-size:14px;color:var(--ink-2);min-height:1.5em}

footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
footer address{font-style:normal}

@media (max-width:760px){
  .fiche{grid-template-columns:1fr;gap:22px}
  .panel{position:static}
  header .eyebrow{text-align:left}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ===== Ajouts pour la version dynamique ===== */

/* Jauge de stock : les styles .stock existaient dans la maquette sans markup,
   faute de donnee reelle. Le webhook la fournit maintenant. */
.stock .bar{min-width:80px}
.stock .n{font-variant-numeric:tabular-nums}
.sold-out .stock .bar i{background:var(--ink-2)}

/* Etat de chargement : on reserve la place au lieu de faire sauter la page. */
[data-loading] .skel{background:var(--paper-2);color:transparent;border-radius:2px;
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
[hidden]{display:none!important}

/* Photos : ratio reserve avant chargement, zero saut de mise en page. */
figure img{background:var(--paper-2)}

/* Vote : poids du vote acheteur, et bandeau d'erreur. */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--red);color:var(--red);
  padding:3px 8px;margin-top:10px}
.cand .result .row .w{color:var(--ink-2)}
.notice{border:1.5px solid var(--red);padding:12px 14px;font-size:14px;margin:18px 0 0}
.notice:empty{display:none}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Compte a rebours de cloture. */
.countdown{font-variant-numeric:tabular-nums}

/* Fil d'ariane / navigation inter-pages, dans la grammaire de la maquette. */
nav.sub{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding-block:14px 0}
nav.sub a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
nav.sub a:hover,nav.sub a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}

/* ===== /merci ===== */
.ticket{border:1px solid var(--ink);padding:clamp(20px,4vw,40px);margin-top:28px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:32px;align-items:center}
.ticket .num{font-family:var(--display);font-weight:800;font-size:clamp(56px,12vw,120px);
  line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ticket .num small{display:block;font-family:var(--mono);font-size:13px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:10px}
@media (max-width:760px){.ticket{grid-template-columns:1fr;gap:22px}}

/* ===== /editions ===== */
.archive{display:grid;gap:28px;padding-block:28px}
.ed{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px;
  border-top:1px solid var(--line);padding-top:26px;align-items:start}
.ed h3{font-size:clamp(22px,3vw,30px);font-weight:800}
.ed .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);padding:3px 8px;color:var(--ink-2)}
.tag.on{border-color:var(--red);color:var(--red)}
.ed .res{display:grid;gap:8px;margin-top:16px;max-width:460px}
.ed .res .line{display:grid;grid-template-columns:1fr auto;gap:10px;font-family:var(--mono);
  font-size:12px;align-items:center}
.ed .res .bar{height:6px;background:var(--line);overflow:hidden;grid-column:1/-1}
.ed .res .bar i{display:block;height:100%;background:var(--ink-2)}
.ed .res .won .bar i{background:var(--red)}
@media (max-width:760px){.ed{grid-template-columns:1fr}}

/* ===== /legal ===== */
.prose{max-width:72ch;padding-block:28px}
.prose h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;margin-top:40px}
.prose h3{font-size:19px;font-weight:800;margin-top:26px}
.prose p,.prose li{color:var(--ink-2);margin:12px 0}
.prose strong{color:var(--ink)}
.prose dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:16px 0;font-size:15px}
.prose dt{color:var(--ink-2)}
.prose dd{margin:0;color:var(--ink)}