:root{
  --ivoire:#F2E3B4; --ivoire-haut:#F8EFD2; --nuit:#14161F; --vert-nuit:#16351F;
  --violet:#7B4FA8; --rose:#F58CC8; --jaune:#FFE500; --magenta:#E5007E;
  --gris:#6E6A55; --trait:rgba(20,22,31,.16);
  --display:"Syne",system-ui,sans-serif; --texte:"Chivo",system-ui,sans-serif;
  --mono:"Chivo Mono",ui-monospace,monospace; --marge:clamp(1.15rem,5vw,5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivoire);color:var(--nuit);font-family:var(--texte);font-weight:300;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.ruban{height:5px;background:linear-gradient(to bottom,var(--jaune) 0 25%,var(--rose) 25% 50%,
  var(--violet) 50% 75%,var(--vert-nuit) 75% 100%)}
.etiquette{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

.entete{position:sticky;top:0;z-index:60}
.entete-barre{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--marge);background:color-mix(in srgb,var(--ivoire) 90%,transparent);backdrop-filter:blur(12px)}
.signature{font-family:var(--display);font-weight:800;font-size:clamp(.95rem,2.4vw,1.15rem);
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.nav{display:flex;gap:clamp(.9rem,2.5vw,1.8rem);list-style:none}
.nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--gris);padding-bottom:3px;border-bottom:2px solid transparent;transition:.22s}
.nav a:hover{color:var(--nuit);border-bottom-color:var(--jaune)}
@media(max-width:680px){
  .entete-barre{flex-wrap:wrap;align-items:center;gap:.55rem;padding-block:.7rem}
  .entete-barre nav{width:100%}
  .nav{justify-content:space-between;gap:.4rem}
  .nav a{font-size:.58rem;letter-spacing:.06em}
}

.fil{padding:1.2rem var(--marge) 0}
.fil a{text-decoration:none}
.fil a:hover{color:var(--nuit)}

.fiche{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(1.5rem,4vw,3rem) var(--marge) clamp(3rem,7vw,5rem);align-items:start}
@media(max-width:900px){.fiche{grid-template-columns:1fr}}

.visuel{position:sticky;top:5rem}
@media(max-width:900px){.visuel{position:static}}
.scene{display:grid;place-items:center;background:var(--ivoire-haut);padding:clamp(1rem,3vw,2.5rem);
  box-shadow:0 1px 2px rgba(20,22,31,.10),0 18px 38px -22px rgba(20,22,31,.55)}
.scene img{max-height:68vh;width:auto;object-fit:contain}
.vues{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.9rem}
.vues button{width:84px;aspect-ratio:4/3;padding:0;border:0;overflow:hidden;background:none;
  cursor:pointer;opacity:.5;transition:opacity .2s,box-shadow .2s}
.vues button img{width:100%;height:100%;object-fit:cover}
.vues button:hover{opacity:.85}
.vues button[aria-current="true"]{opacity:1;box-shadow:0 0 0 3px var(--jaune)}
.note{margin-top:.55rem;min-height:1.1em}

.titre{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4.5vw,2.9rem);
  line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.sous{margin-top:.7rem}
.prix{margin-top:1.6rem;font-family:var(--mono);font-size:1.5rem;letter-spacing:.02em}
.statut{display:inline-block;margin-top:.5rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.25rem .6rem}
.statut.dispo{background:var(--jaune);color:var(--nuit)}
.statut.vendue{background:var(--magenta);color:#fff}


.actions-achat{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.acheter,.demander{display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:1rem 2.1rem;transition:.22s}
.acheter{background:var(--nuit);color:var(--ivoire)}
.acheter:hover{background:var(--magenta)}
.demander.secondaire{margin-top:0;background:transparent;color:var(--nuit);border:1px solid var(--nuit)}
.demander.secondaire:hover{background:var(--nuit);color:var(--ivoire)}

.texte{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--trait)}
.texte p+p{margin-top:1rem}
.texte p{max-width:52ch}

.tableau{margin-top:2rem;border-top:1px solid var(--trait);width:100%;border-collapse:collapse}
.tableau th,.tableau td{text-align:left;padding:.6rem 0;border-bottom:1px solid var(--trait);vertical-align:top}
.tableau th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);font-weight:400;width:42%}
.tableau td{font-size:.95rem}

.voisines{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.6rem var(--marge);border-top:1px solid var(--trait)}
.voisines a{text-decoration:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em}
.voisines a:hover{color:var(--magenta)}
.pied{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.8rem var(--marge)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

.livraison-note{margin-top:.8rem;max-width:58ch;font-family:var(--mono);font-size:.68rem;line-height:1.55;letter-spacing:.02em;color:var(--gris)}

/* ASPIRATION — seconde lecture sous lumière UV */
.revelation{padding:clamp(2.5rem,5vw,5rem) var(--marge);background:#111522;color:#F8EFD2}
.revelation-inner{max-width:1240px;margin:0 auto}
.revelation .etiquette{color:#F58CC8}
.revelation h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.1;margin:.65rem 0 1rem;text-transform:uppercase}
.revelation-intro{max-width:65ch;margin-bottom:1.6rem;color:#E0DCE9}
.revelation-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.7rem,2.5vw,2rem);align-items:start}
.revelation-images figure{min-width:0}
.revelation-images img{width:100%;max-height:660px;object-fit:contain;background:#0b0e19;aspect-ratio:1/1;box-shadow:0 18px 35px rgba(0,0,0,.25)}
.revelation-images figcaption{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.65rem 0;color:#E6DFF3}
.revelation-autres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.revelation-autres img{max-height:470px;width:100%;object-fit:contain;background:#0b0e19}
.revelation-autres figcaption{font-family:var(--mono);font-size:.7rem;padding:.5rem 0;color:#E6DFF3}
.revelation-renvoi{margin-top:1.2rem;font-family:var(--mono);font-size:.68rem;color:#DED8E8;max-width:65ch}
.vues button.uv-vignette{position:relative;border:1px solid #7B4FA8}
.uv-raccourci{display:inline-flex;gap:.5rem;align-items:center;justify-content:center;margin-top:1rem;padding:.7rem 1rem;background:#111522;color:#fff;text-decoration:none;font:500 .74rem var(--mono);letter-spacing:.04em}
.uv-raccourci:hover,.uv-raccourci:focus-visible{background:#7B4FA8}
@media(max-width:640px){.revelation-images,.revelation-autres{grid-template-columns:1fr}.revelation-images img{max-height:510px}}