/* Webtober · interface de jeu d'automne dessinée en code (skill ui-jeu-video) */

:root {
  /* Palette restreinte, douze couleurs */
  --nuit: #1d1830;
  --nuit-2: #2a2240;
  --crepuscule: #4a2f5c;
  --prune: #7a3b5e;
  --rouille: #b5452a;
  --feuille: #e0662c;
  --ambre: #f2a93b;
  --or: #ffd166;
  --mousse: #5c7a3a;
  --sapin: #23392c;
  --papier: #f3e3c3;
  --encre: #2b1d1a;

  --px: 4px;              /* épaisseur d'un pixel d'interface */
  --titre: "Jersey 15", ui-monospace, monospace;
  --logo: "Pixelify Sans", ui-monospace, monospace;
  --texte: "Literata", Georgia, serif;
  --large: 72rem;
  --etroit: 46rem;
}
@media (max-width: 640px) { :root { --px: 3px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--encre);
  font: 400 1.0625rem/1.6 var(--texte);
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
[hidden] { display: none !important; }

.evitement { position: absolute; left: -999px; top: 0; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--or); padding: .5rem 1rem; }

.large { width: min(100% - 2rem, var(--large)); margin-inline: auto; }
.etroit { width: min(100% - 2rem, var(--etroit)); margin-inline: auto; }

/* Sprites : canvas agrandi par facteur entier, sans lissage */
.sprite { image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }

/* ─── Boîte en pixels : coins en escalier par box-shadow ─── */
.boite {
  --fond: var(--papier);
  --bord: var(--encre);
  position: relative;
  background: var(--fond);
  margin: var(--px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bord),
    0 var(--px) 0 0 var(--bord),
    calc(var(--px) * -1) 0 0 0 var(--bord),
    var(--px) 0 0 0 var(--bord),
    inset 0 calc(var(--px) * -1) 0 0 rgb(0 0 0 / .12),
    inset var(--px) var(--px) 0 0 rgb(255 255 255 / .35);
}
.boite-nuit { --fond: var(--nuit-2); --bord: #0e0b18; color: var(--papier); }
.boite-nuit { box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bord), 0 var(--px) 0 0 var(--bord),
    calc(var(--px) * -1) 0 0 0 var(--bord), var(--px) 0 0 0 var(--bord),
    inset 0 calc(var(--px) * -1) 0 0 rgb(0 0 0 / .3),
    inset var(--px) var(--px) 0 0 rgb(255 255 255 / .08); }

/* ─── Boutons ─── */
.btn {
  --fond: var(--or);
  --bord: var(--encre);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.3rem;
  margin: var(--px);
  font: 400 1.45rem/1 var(--titre);
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--encre);
  background: var(--fond);
  border: 0; cursor: pointer;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bord), 0 var(--px) 0 0 var(--bord),
    calc(var(--px) * -1) 0 0 0 var(--bord), var(--px) 0 0 0 var(--bord),
    inset 0 calc(var(--px) * -1.5) 0 0 rgb(0 0 0 / .22),
    inset var(--px) var(--px) 0 0 rgb(255 255 255 / .45);
  transition: transform 80ms steps(2);
}
.btn:hover { --fond: #ffe08f; }
.btn:active { transform: translateY(var(--px)); }
.btn-sombre { --fond: var(--nuit-2); color: var(--papier); --bord: #0e0b18; }
.btn-sombre:hover { --fond: var(--crepuscule); }
.btn-plein { width: calc(100% - 2 * var(--px)); justify-content: center; }

/* Focus visible : le curseur de menu */
:focus-visible { outline: var(--px) solid var(--or); outline-offset: calc(var(--px) * 2); }
.btn:focus-visible { outline-color: #fff; }

/* ─── Écran titre ─── */
.titre {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  /* repli sans canvas : ciel par paliers */
  background: linear-gradient(var(--nuit) 0 20%, var(--crepuscule) 20% 40%, var(--prune) 40% 58%, var(--rouille) 58% 70%, var(--sapin) 70%);
  color: var(--papier);
}
.decor { position: absolute; inset: 0; width: 100%; height: 100%; }
.titre-contenu {
  position: relative;
  width: min(100% - 2rem, var(--large));
  margin: 0 auto;
  padding: 5rem 0 34vh;
  text-align: center;
}
.titre-sur {
  font: 400 1.25rem/1.2 var(--titre);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  text-shadow: calc(var(--px) / 2) calc(var(--px) / 2) 0 var(--nuit);
}
.titre-nom {
  margin: .6rem 0 1rem;
  font: 700 clamp(3.2rem, 15vw, 10rem)/.9 var(--logo);
  letter-spacing: .04em;
  color: var(--papier);
  text-shadow:
    var(--px) var(--px) 0 var(--rouille),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--nuit);
}
.titre-nom span { color: var(--ambre); }
.titre-offre {
  font: 400 clamp(1.05rem, 2.4vw, 1.4rem)/1.5 var(--texte);
  text-shadow: 0 2px 0 var(--nuit), 0 0 18px rgb(29 24 48 / .8);
}
.titre-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; justify-content: center; margin-top: 2rem; }
.titre-compteur {
  margin-top: 1.6rem;
  font: 400 1.3rem/1 var(--titre);
  letter-spacing: .06em;
  color: var(--or);
  text-shadow: calc(var(--px) / 2) calc(var(--px) / 2) 0 var(--nuit);
}
/* Curseur de menu qui clignote en paliers devant le bouton principal */
.titre-actions .btn-or::before {
  content: "";
  width: 0; height: 0;
  border-left: .55rem solid var(--encre);
  border-top: .4rem solid transparent;
  border-bottom: .4rem solid transparent;
  animation: clignote 1s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .titre-actions .btn-or::before { animation: none; } }

/* ─── Sections ─── */
.bloc { position: relative; padding: clamp(4rem, 9vw, 7rem) 0; }
.bloc-papier { background: var(--papier); }
.bloc-nuit { background: var(--nuit); color: var(--papier); }
.bloc-foret { background: var(--sapin); color: var(--papier); }
.bloc-crepuscule { background: var(--crepuscule); color: var(--papier); }
/* Lisière en dents de pixels entre deux sections */
.bloc + .bloc::before, .pied::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--px) * -4); height: calc(var(--px) * 4);
  background: inherit;
  -webkit-mask: linear-gradient(90deg, #000 50%, transparent 50%) 0 0 / calc(var(--px) * 8) var(--px) repeat-x,
                linear-gradient(#000, #000) 0 var(--px) / 100% calc(var(--px) * 3) no-repeat;
          mask: linear-gradient(90deg, #000 50%, transparent 50%) 0 0 / calc(var(--px) * 8) var(--px) repeat-x,
                linear-gradient(#000, #000) 0 var(--px) / 100% calc(var(--px) * 3) no-repeat;
}

.etiquette {
  font: 400 1.2rem/1 var(--titre);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouille);
}
.etiquette-claire { color: var(--ambre); }
.h2 {
  margin: .5rem 0 2rem;
  font: 400 clamp(2.6rem, 7vw, 4.4rem)/1 var(--titre);
  letter-spacing: .01em;
  color: var(--encre);
}
.h2-clair { color: var(--papier); }
.intro-claire { margin: -1rem 0 2.2rem; max-width: 38rem; color: #e6d6b8; }

/* L'origine Inktober */
.origine {
  display: flex; gap: 1.2rem; align-items: center;
  padding: 1.2rem 1.4rem;
  margin-bottom: 3.5rem;
  max-width: 46rem;
  --fond: #fff6e2;
  font-style: italic;
}
.origine p { flex: 1; }

/* Inventaire */
.inventaire {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .inventaire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .inventaire { grid-template-columns: 1fr; } }
.objet { padding: 1.4rem 1.3rem 1.3rem; }
.objet h3 { margin: .9rem 0 .35rem; font: 400 1.7rem/1.05 var(--titre); }
.objet p { font-size: 1rem; }
.objet-or { --fond: var(--or); }
.regle { margin-top: 2.2rem; font-size: 1.1rem; }
.regle strong { font: 400 1.4rem/1 var(--titre); color: var(--rouille); }

/* ─── Cartouches (réalisations) ─── */
.cartouches {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.cartouche {
  display: block;
  text-decoration: none;
  padding: calc(var(--px) * 3) calc(var(--px) * 3) 1rem;
  margin: var(--px);
  background: #3a3050;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 #0e0b18, 0 var(--px) 0 0 #0e0b18,
    calc(var(--px) * -1) 0 0 0 #0e0b18, var(--px) 0 0 0 #0e0b18,
    inset 0 calc(var(--px) * -2) 0 0 rgb(0 0 0 / .35),
    inset var(--px) var(--px) 0 0 rgb(255 255 255 / .12);
  transition: transform 120ms steps(3), background-color 120ms steps(2);
}
.cartouche-ecran {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--nuit);
  box-shadow: 0 0 0 var(--px) #0e0b18;
}
.cartouche-ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cartouche-nom { display: block; margin-top: .9rem; font: 400 1.55rem/1.1 var(--titre); color: var(--papier); }
.cartouche-adresse { display: block; margin-top: .25rem; font-size: .9rem; color: #bfb0cf; }
.cartouche:hover, .cartouche:focus-visible { transform: translateY(calc(var(--px) * -2)); background: var(--crepuscule); }
.cartouche:hover .cartouche-nom { color: var(--or); }
@media (prefers-reduced-motion: reduce) { .cartouche { transition: none; } .cartouche:hover { transform: none; } }

/* ─── Dialogues (témoignages vidéo) ─── */
.dialogues {
  display: grid; gap: 2rem 1.4rem;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}
.dialogue { margin: 0; }
.dialogue-large { grid-column: 1 / -1; max-width: 52rem; width: 100%; justify-self: center; }
.dialogue-video {
  position: relative; overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--nuit);
  margin: var(--px);
  box-shadow: 0 calc(var(--px) * -1) 0 0 #0b120d, 0 var(--px) 0 0 #0b120d, calc(var(--px) * -1) 0 0 0 #0b120d, var(--px) 0 0 0 #0b120d;
}
.dialogue-carre { aspect-ratio: 9 / 16; }
.dialogue-paysage { aspect-ratio: 16 / 9; }
.dialogue-video video { width: 100%; height: 100%; object-fit: cover; }
.dialogue-carre video { object-fit: cover; }
.lecture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(transparent 55%, rgb(29 24 48 / .55));
  display: grid; place-items: center;
}
.lecture span {
  width: 4.2rem; height: 4.2rem;
  background: var(--or);
  display: grid; place-items: center;
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--encre), 0 var(--px) 0 0 var(--encre), calc(var(--px) * -1) 0 0 0 var(--encre), var(--px) 0 0 0 var(--encre), inset 0 calc(var(--px) * -1.5) 0 0 rgb(0 0 0 / .22);
}
.lecture span::before {
  content: ""; margin-left: .3rem;
  border-left: 1.2rem solid var(--encre);
  border-top: .8rem solid transparent;
  border-bottom: .8rem solid transparent;
}
.dialogue.en-lecture .lecture { background: none; }
.dialogue.en-lecture .lecture span { display: none; }
.dialogue-boite {
  position: relative;
  margin: 1.2rem var(--px) var(--px);
  padding: 1.3rem 1rem .9rem;
  background: var(--papier);
  color: var(--encre);
  font-size: .98rem;
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--encre), 0 var(--px) 0 0 var(--encre), calc(var(--px) * -1) 0 0 0 var(--encre), var(--px) 0 0 0 var(--encre), inset 0 calc(var(--px) * -1) 0 0 rgb(0 0 0 / .12);
}
.plaque {
  position: absolute; top: -1rem; left: .8rem;
  padding: .3rem .6rem;
  font: 400 1.3rem/1 var(--titre);
  background: var(--feuille); color: var(--encre);
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--encre), 0 var(--px) 0 0 var(--encre), calc(var(--px) * -1) 0 0 0 var(--encre), var(--px) 0 0 0 var(--encre);
}
.dialogue-boite a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dialogue-boite a:hover { color: var(--rouille); }

@media (max-width: 900px) { .dialogues { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .dialogues { grid-template-columns: 1fr 1fr; gap: 1.6rem .9rem; }
  .plaque { font-size: 1.1rem; }
  .dialogue-boite { font-size: .9rem; padding: 1.2rem .7rem .7rem; }
}

/* ─── Calendrier : sélection de niveau ─── */
.reserver {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .reserver { grid-template-columns: minmax(0, 1fr); } }
.carte-mois { padding: 1.4rem 1.2rem 1.2rem; }
.mois { font: 400 1.7rem/1 var(--titre); color: var(--or); margin-bottom: 1rem; }
.semaine, .niveaux { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(var(--px) * 2); }
.semaine span { font: 400 1.1rem/1 var(--titre); text-align: center; color: #a898bb; padding-bottom: .5rem; }
.niveau {
  position: relative;
  aspect-ratio: 1;
  min-height: 2.6rem;
  border: 0; padding: 0;
  font: 400 clamp(1.35rem, 2.8vw, 1.8rem)/1 var(--titre);
  color: var(--encre);
  background: var(--ambre);
  cursor: pointer;
  box-shadow: inset 0 calc(var(--px) * -1) 0 0 rgb(0 0 0 / .25), inset var(--px) var(--px) 0 0 rgb(255 255 255 / .35);
  display: grid; place-items: center;
  transition: transform 80ms steps(2);
}
.niveau:hover { transform: translateY(calc(var(--px) * -1)); background: var(--or); }
.niveau[aria-pressed="true"] { background: var(--or); outline: var(--px) solid #fff; outline-offset: calc(var(--px) * -1); }
.niveau[aria-pressed="true"]::after {
  content: ""; position: absolute; left: calc(var(--px) * -2.5); top: 50%; translate: 0 -50%;
  border-left: .5rem solid #fff; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent;
  animation: clignote 1s steps(1) infinite;
}
.niveau-vide { aspect-ratio: 1; }
.niveau.pris, .niveau.passe {
  background: #3a3050; color: #7d6f90; cursor: not-allowed;
  box-shadow: inset 0 calc(var(--px) * -1) 0 0 rgb(0 0 0 / .3);
}
.niveau.pris::before {
  /* feuille tombée : le niveau est pris */
  content: ""; position: absolute; right: 12%; top: 12%; width: 22%; aspect-ratio: 1; background: var(--rouille);
}
.niveau.pris:hover, .niveau.passe:hover { transform: none; }
.niveau.livre { background: var(--mousse); color: var(--papier); text-decoration: none; }
.niveau.livre:hover { background: #6f9147; }
@media (prefers-reduced-motion: reduce) { .niveau { transition: none; } .niveau[aria-pressed="true"]::after { animation: none; } }

.legende { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: 0; margin: 1.2rem 0 0; font-size: .9rem; color: #d8c9e0; }
.legende li { display: flex; align-items: center; gap: .45rem; }
.pastille { width: .9rem; height: .9rem; display: inline-block; }
.pastille-libre { background: var(--ambre); }
.pastille-pris { background: #3a3050; box-shadow: inset -.3rem .3rem 0 -.1rem var(--rouille); }
.pastille-livre { background: var(--mousse); }

/* Formulaire : écran « Nouvelle partie » */
.partie, .sauvegarde { padding: 1.6rem 1.4rem 1.4rem; color: var(--encre); }
.partie-titre { margin: .45rem 0 1.2rem; font: 400 2.1rem/1.05 var(--titre); }
.partie-erreur { margin: -.4rem 0 1rem; padding: .6rem .8rem; background: #f6c7b4; color: #6b1d0c; font-size: .95rem; }
.champ { display: block; margin-bottom: 1rem; }
.champ span { display: block; margin-bottom: .35rem; font: 400 1.25rem/1.1 var(--titre); letter-spacing: .02em; }
.champ input, .champ textarea, .champ select {
  width: 100%;
  font: 400 1.0625rem/1.4 var(--texte);
  color: var(--encre);
  background: #fffaf0;
  border: 0;
  padding: .7rem .8rem;
  box-shadow: inset 0 0 0 calc(var(--px) / 1.5) var(--encre), inset var(--px) var(--px) 0 0 rgb(0 0 0 / .08);
  border-radius: 0;
}
.champ textarea { resize: vertical; min-height: 5.5rem; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: var(--px) solid var(--feuille); outline-offset: 0; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.partie-note { margin-top: .9rem; font-size: .88rem; color: #6b5a52; }
.js .champ-jour { display: none; }
.sauvegarde { text-align: left; }
.sauvegarde .sprite { margin-bottom: 1rem; }
.sauvegarde:focus { outline: none; }

/* ─── FAQ : journal de quête ─── */
.faq { display: grid; gap: 1rem; }
.question { padding: 0; --fond: #fff6e2; }
.question summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 1.3rem;
  font: 400 1.5rem/1.15 var(--titre);
  position: relative;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%; translate: 0 -50%;
  border-left: .45rem solid transparent; border-right: .45rem solid transparent; border-top: .55rem solid var(--rouille);
}
.question[open] summary::after { border-top: 0; border-bottom: .55rem solid var(--rouille); }
.question summary:hover { color: var(--rouille); }
.question p { padding: 0 1.3rem 1.2rem; }
.faq-fin { margin-top: 2.5rem; text-align: center; }

/* ─── Pied ─── */
.pied { position: relative; background: var(--nuit); color: #cbbfd8; padding: 3rem 0 6rem; font-size: .95rem; }
.pied-grille { display: grid; gap: .6rem; }
.pied a { color: var(--or); }
.pied-note { font-size: .85rem; color: #9888ab; max-width: 44rem; }

/* ─── Bouton calendrier flottant ─── */
.flottant {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  padding: .7rem 1rem;
  font-size: 1rem;
  translate: 0 160%;
  visibility: hidden;
  transition: translate 200ms steps(4), visibility 0s 200ms;
}
.flottant.visible { translate: 0 0; visibility: visible; transition: translate 200ms steps(4); }
@media (prefers-reduced-motion: reduce) { .flottant { transition: none; } }
@media (max-width: 520px) { .flottant span { display: none; } .flottant { padding: .75rem; } }
.merci { min-height: 100svh; display: grid; align-items: center; }

/* ─── Téléphone : inventaire en lignes, réalisations sur deux colonnes ─── */
@media (max-width: 560px) {
  .objet { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; padding: 1rem 1rem .9rem; }
  .objet .sprite { grid-row: span 2; margin-top: .2rem; }
  .objet h3 { margin: 0 0 .2rem; font-size: 1.45rem; }
  .origine { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .cartouches { grid-template-columns: 1fr 1fr; gap: 1rem .7rem; }
  .cartouche { padding: calc(var(--px) * 2) calc(var(--px) * 2) .7rem; }
  .cartouche-nom { font-size: 1.2rem; margin-top: .6rem; }
  .cartouche-adresse { display: none; }
}

/* ─── Formulaire en deux étapes : créneau du premier appel ─── */
.avec-js { display: none; }
.js .avec-js { display: inline; }
.js .sans-js { display: none; }
.champ em { font: italic 400 .95rem var(--texte); color: #6b5a52; }
.appel-intro { margin: -.4rem 0 1.1rem; }
.appel-sous { margin: 0 0 .5rem; font: 400 1.25rem/1 var(--titre); }
.appel-jours, .appel-heures { display: grid; gap: calc(var(--px) * 1.5); margin-bottom: 1.2rem; }
.appel-defile { display: flex; align-items: stretch; gap: calc(var(--px) * 1.5); margin-bottom: 1.2rem; }
.appel-jours {
  display: flex; flex: 1; min-width: 0; margin: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: var(--px);
}
.appel-jours::-webkit-scrollbar { display: none; }
.appel-jours .creneau { flex: 0 0 4.6rem; scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .appel-jours { scroll-behavior: auto; } }
.fleche {
  flex: 0 0 2.4rem; border: 0; cursor: pointer; padding: 0;
  background: var(--nuit-2);
  display: grid; place-items: center;
  box-shadow: inset 0 calc(var(--px) * -1) 0 0 rgb(0 0 0 / .35), inset var(--px) var(--px) 0 0 rgb(255 255 255 / .1);
}
.fleche span { width: 0; height: 0; border-right: .6rem solid var(--or); border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; }
.fleche-apres span { border-right: 0; border-left: .6rem solid var(--or); }
.fleche:hover { background: var(--crepuscule); }
.fleche:disabled { cursor: default; opacity: .3; }
.appel-heures { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); padding: var(--px); }
.creneau {
  border: 0; padding: .55rem .2rem; cursor: pointer;
  font: 400 1.15rem/1.05 var(--titre); color: var(--encre);
  background: #fffaf0;
  box-shadow: inset 0 0 0 calc(var(--px) / 1.5) var(--encre), inset 0 calc(var(--px) * -1.5) 0 0 rgb(0 0 0 / .08);
}
.creneau small { display: block; font-size: .85rem; color: #6b5a52; }
.creneau:hover { background: #ffe08f; }
.creneau[aria-pressed="true"] { background: var(--or); box-shadow: inset 0 0 0 var(--px) var(--encre); }
.creneau:disabled { cursor: not-allowed; color: #b3a595; background: #efe3cc; box-shadow: inset 0 0 0 calc(var(--px) / 2) #c9b99f; text-decoration: line-through; }
.appel-vide { grid-column: 1 / -1; font-size: .95rem; color: #6b5a52; }
.appel-actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: space-between; }
.appel-actions .btn { flex: 1; justify-content: center; }

/* ─── Vitrine Instagram : le bonus, encart de nuit étoilée ─── */
.vitrine {
  position: relative;
  display: grid; gap: 2rem 3rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
  margin: 3.5rem var(--px) var(--px);
  padding: clamp(1.6rem, 4vw, 3rem);
  color: var(--papier);
  background:
    radial-gradient(circle at 25% 40%, rgb(255 209 102 / .2), transparent 50%),
    radial-gradient(circle at 80% 90%, rgb(224 102 44 / .22), transparent 45%),
    var(--nuit);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--or), 0 var(--px) 0 0 var(--or),
    calc(var(--px) * -1) 0 0 0 var(--or), var(--px) 0 0 0 var(--or),
    0 0 0 calc(var(--px) * 2) var(--encre),
    calc(var(--px) * 3) calc(var(--px) * 3) 0 calc(var(--px) * 2) var(--rouille);
}
@media (max-width: 760px) { .vitrine { grid-template-columns: minmax(0, 1fr); } }
.vitrine-texte { position: relative; z-index: 1; }
.badge-bonus {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem .9rem .35rem .7rem;
  font: 400 1.5rem/1 var(--titre); letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre); background: var(--or);
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--encre), 0 var(--px) 0 0 var(--encre), calc(var(--px) * -1) 0 0 0 var(--encre), var(--px) 0 0 0 var(--encre), inset 0 calc(var(--px) * -1.5) 0 0 rgb(0 0 0 / .2), inset var(--px) var(--px) 0 0 rgb(255 255 255 / .5);
  rotate: -3deg;
  animation: brille 2.4s steps(2) infinite;
}
.badge-bonus .sprite { animation: tourne 3s steps(8) infinite; }
@keyframes brille { 50% { background: #ffe39c; } }
@keyframes tourne { 50% { transform: scale(1.25); } }
.vitrine-titre {
  margin: 1rem 0 .9rem;
  font: 400 clamp(2.4rem, 5.5vw, 3.6rem)/1 var(--titre);
  color: var(--or);
  text-shadow: var(--px) var(--px) 0 var(--rouille), calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--encre);
}
.vitrine-texte p + p { margin-top: .9rem; }
.vitrine-texte a { color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vitrine-note { font-size: .92rem; color: #cbbfd8; font-style: italic; }

/* Éclats : petites croix de pixels qui scintillent en paliers */
.eclat {
  position: absolute; width: calc(var(--px) * 1); height: calc(var(--px) * 1);
  background: var(--or);
  box-shadow: 0 calc(var(--px) * -1) var(--or), 0 var(--px) var(--or), calc(var(--px) * -1) 0 var(--or), var(--px) 0 var(--or),
              0 calc(var(--px) * -2) rgb(255 209 102 / .5), 0 calc(var(--px) * 2) rgb(255 209 102 / .5), calc(var(--px) * -2) 0 rgb(255 209 102 / .5), calc(var(--px) * 2) 0 rgb(255 209 102 / .5);
  animation: scintille 1.6s steps(1) infinite;
}
.eclat-1 { top: 12%; left: 46%; }
.eclat-2 { top: 78%; left: 8%; animation-delay: -.4s; background: var(--papier); }
.eclat-3 { top: 20%; right: 4%; animation-delay: -.9s; }
.eclat-4 { bottom: 10%; left: 52%; animation-delay: -1.2s; }
.eclat-5 { top: 6%; left: 18%; animation-delay: -.7s; }
@keyframes scintille { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .eclat, .badge-bonus, .badge-bonus .sprite { animation: none; } }

.post {
  margin: 0; width: 100%; max-width: 24rem; justify-self: center;
  background: #fff; color: #111;
  font: 400 .88rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  border-radius: 12px; overflow: hidden;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 0 0 calc(var(--px) * 2) var(--or), calc(var(--px) * 4) calc(var(--px) * 4) 0 calc(var(--px) * 2) var(--encre);
  rotate: 2deg;
}
@media (max-width: 760px) { .post { rotate: 0deg; } }
.post-tete { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; }
.post-avatar {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; background: #fff;
  padding: 2px; flex: none;
  box-shadow: 0 0 0 2.5px #f58529, 0 0 0 2.5px #dd2a7b;
  background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
.post-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 40%; }
.post-compte { font-weight: 600; font-size: .95rem; }
.post-points { margin-left: auto; letter-spacing: -.1em; color: #444; }

.post-image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--crepuscule); container-type: inline-size; }
.post-fond { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.post-calque {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: 7cqw 7cqw 6cqw; text-align: center; color: var(--papier);
}
.post-haut { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.post-logo { font: 700 9cqw/1 var(--logo); letter-spacing: .03em; text-shadow: .6cqw .6cqw 0 var(--rouille), 1.2cqw 1.2cqw 0 var(--nuit); }
.post-logo span { color: var(--ambre); }
.post-jour {
  font: 400 5.6cqw/1 var(--titre); color: var(--encre); background: var(--or);
  padding: 1.2cqw 2.2cqw .8cqw;
  box-shadow: 0 -.8cqw 0 0 var(--encre), 0 .8cqw 0 0 var(--encre), -.8cqw 0 0 0 var(--encre), .8cqw 0 0 0 var(--encre);
}
.post-ecran {
  width: 100%; margin-top: 7cqw; background: var(--papier);
  box-shadow: 0 -1cqw 0 0 var(--encre), 0 1cqw 0 0 var(--encre), -1cqw 0 0 0 var(--encre), 1cqw 0 0 0 var(--encre), 2.2cqw 2.6cqw 0 0 rgb(29 24 48 / .55);
}
.post-barre { display: flex; align-items: center; gap: 1.2cqw; padding: 1.8cqw 2.2cqw; background: var(--encre); }
.post-barre i { width: 2cqw; height: 2cqw; background: var(--feuille); }
.post-barre i:nth-child(2) { background: var(--ambre); }
.post-barre i:nth-child(3) { background: var(--mousse); }
.post-barre span { margin-left: 2cqw; flex: 1; text-align: left; font: 400 3.6cqw/1 var(--titre); color: #cbbfd8; background: #3a2c28; padding: 1cqw 2cqw .6cqw; }
.post-site { padding: 3cqw; display: grid; gap: 3cqw; }
.post-site-hero { display: grid; gap: 1.8cqw; justify-items: start; padding: 4cqw; background: var(--mousse); }
.post-site-hero b { height: 3.6cqw; width: 70%; background: var(--papier); }
.post-site-hero b + b { width: 45%; height: 2.4cqw; opacity: .7; }
.post-site-hero em { margin-top: 1.4cqw; width: 26%; height: 5cqw; background: var(--or); }
.post-site-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.post-site-cartes b { aspect-ratio: 1; background: var(--ambre); }
.post-site-cartes b:nth-child(2) { background: var(--feuille); }
.post-site-cartes b:nth-child(3) { background: var(--prune); }
.post-nom { margin-top: auto; font: 400 8.4cqw/1 var(--titre); text-shadow: .8cqw .8cqw 0 var(--nuit); }
.post-sous { margin-top: 1.6cqw; font: 400 4.4cqw/1.2 var(--texte); text-shadow: 0 .4cqw 0 var(--nuit); }

.post-actions { display: flex; align-items: center; gap: .9rem; padding: .6rem .75rem .2rem; }
.post-actions svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: #111; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.post-signet { margin-left: auto; }
.post-points-carrousel { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 4px; }
.post-actions { position: relative; }
.post-points-carrousel i { width: 6px; height: 6px; border-radius: 50%; background: #c8c8c8; }
.post-points-carrousel i.actif { background: #3897f0; }
.post-legende { padding: .3rem .75rem .9rem; }
.post-legende strong { font-weight: 600; margin-right: .25rem; }
.post-capture { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.post-sous { font-family: var(--titre); font-size: 4.8cqw; letter-spacing: .02em; color: var(--or); }
.post-mention { color: #00376b; }
.sauvegarde-suite { margin: 1rem 0 1.2rem; }