/* =====================================================================
   BOUTIQUE (page Merch, 14.10.2026) — js/boutique.js remplit la vitrine, la fiche et le panier.
   Même univers que le reste du site (fenêtre de verre, barre de titre, pilules, Michroma / Sora), mais la page
   se comporte comme une boutique : vitrine (le t-shirt en grand, les autres articles autour), fiche d'un article
   dans une fenêtre (photos, couleur, taille, quantité), panier qui sort sur le côté.
   Toutes les photos partagent le même fond de studio pervenche (--givre) : la vitrine se lit comme un catalogue.
   ===================================================================== */
.contenu-boutique {
  max-width: 1160px;
  --b-texte: var(--abysse);
  --b-doux: rgb(10 11 46 / 0.68);    /* texte secondaire */
  --b-ligne: rgb(10 11 46 / 0.22);   /* bordures, séparations */
  --b-plein: var(--abysse);          /* boutons pleins */
  --b-plein-texte: var(--halo);
  --b-studio: #c9ccf0;               /* fond des photos (le même que les photos de studio) */
  --b-indispo: #d3192e;              /* rouge « Not available » */
}
[data-theme="sombre"] .contenu-boutique {
  --b-texte: var(--texte-sombre);
  --b-doux: rgb(230 242 220 / 0.7);
  --b-ligne: rgb(230 242 220 / 0.2);
  --b-plein: var(--ultra);
  --b-plein-texte: #050705;
  --b-indispo: #ff4d5e;
}

/* La fenêtre de la boutique est presque opaque (demande de Joachim, 14.10.2026) : on ne voit plus la sphère du
   fond derrière les articles */
.boutique.fenetre { background: rgb(244 243 248 / 0.96); }
.fiche-fenetre.fenetre, .panier-fenetre.fenetre { background: #f4f3f8; } /* fiche et panier : tout à fait opaques */
[data-theme="sombre"] .boutique.fenetre { background: rgb(8 11 6 / 0.96); }
[data-theme="sombre"] .fiche-fenetre.fenetre, [data-theme="sombre"] .panier-fenetre.fenetre { background: #080b06; }

/* Bouton « Cart » dans la barre de titre de la fenêtre */
.boutique .fenetre-barre::after { margin-left: 14px; }
.boutique-panier {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: rgb(255 255 255 / 0.14);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
  padding: 4px 6px 4px 14px;
  cursor: var(--curseur-main);
  transition: background 0.3s ease;
}
.boutique-panier:hover { background: rgb(255 255 255 / 0.3); }
.boutique-panier-nombre {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--police-titre);
  font-size: 11px;
  color: var(--abysse);
  background: var(--halo);
}

.boutique .fenetre-corps { color: var(--b-texte); }
.boutique-intro { max-width: 62ch; margin: 0 0 10px; }
/* Bandeau « Preview » : un voyant ambre, comme sur une machine en veille */
.boutique-apercu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 32px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--b-doux);
  border: 1px dashed var(--b-ligne);
  border-radius: 999px;
}
.boutique-apercu::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f0a91c;
  box-shadow: 0 0 8px #f0a91c;
}
.boutique-apercu[hidden], .boutique-message[hidden] { display: none; }
.boutique-message {
  margin: 0 0 28px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--lagon);
  background: rgb(63 198 217 / 0.12);
}

/* ---------- Vitrine : le t-shirt en grand (2 × 2 cases), les quatre autres autour ---------- */
.vitrine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
}
.article { position: relative; }
.article-vedette { grid-column: span 2; grid-row: span 2; }
.article-ouvrir {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: var(--curseur-main);
}
.article-cadre {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--b-studio);
  box-shadow: 0 12px 30px rgb(10 11 46 / 0.22);
  transition: transform 0.9s var(--glisse), box-shadow 0.9s var(--glisse);
}
.article-ouvrir:hover .article-cadre,
.article-ouvrir:focus-visible .article-cadre {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 20px 40px rgb(59 63 216 / 0.38);
}
.article-ouvrir:focus-visible { outline: none; }
.article-ouvrir:focus-visible .article-cadre { outline: 2px solid var(--ultra); outline-offset: 4px; }
.article-texte { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin-top: 14px; }
.article-nom { font-family: var(--police-titre); font-size: 14px; line-height: 1.35; }
.article-prix { font-size: 15px; font-weight: 600; }
.article-resume { grid-column: 1 / -1; font-size: 13px; color: var(--b-doux); }
.article-vedette .article-nom { font-size: clamp(16px, 2vw, 22px); }
.article-vedette .article-prix { font-size: 18px; }

/* « Not available » (demande de Joachim, 14.10.2026) : tant que la boutique est fermée (BOUTIQUE.ouverte = false),
   une petite barre rouge en haut à gauche de chaque case, une ligne rouge dans la fiche, bouton d'ajout éteint */
.article-indispo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 5px 12px 5px 10px;
  font-family: var(--police-titre);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--b-indispo);
  border-bottom-right-radius: 10px;
}
.article-vedette .article-indispo { padding: 7px 16px 7px 14px; font-size: 12px; }
/* les pastilles de couleur (en haut à gauche aussi) passent juste sous la barre */
.article:has(.article-indispo) .article-couleurs { top: 36px; }
.article-vedette:has(.article-indispo) .article-couleurs { top: 44px; }
.fiche-indispo { margin: -8px 0 14px; font-weight: 600; color: var(--b-indispo); }
.fiche-indispo[hidden] { display: none; }
.pilule.fiche-ajouter:disabled { opacity: 0.45; pointer-events: none; }
.article-vedette .article-resume { font-size: 15px; }
/* pastilles des couleurs disponibles, en haut à gauche de la photo */
.article-couleurs {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgb(244 243 248 / 0.7);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.article-couleurs span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teinte);
  box-shadow: inset 0 0 0 1px rgb(10 11 46 / 0.35);
}

/* ---------- Une photo d'article, et ce qui est imprimé dessus ---------- */
.photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  isolation: isolate; /* les modes de fusion des impressions ne touchent que la photo */
  background: var(--b-studio);
}
.photo-carree { aspect-ratio: 1; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.impression {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--l);
  translate: -50% -50%;
  transform: perspective(30em) rotateY(var(--ry, 0deg));
  pointer-events: none;
}
/* Logo Nova Sphere (noir sur fond blanc, rogné à son contour) imprimé sur un vêtement :
   encre noire = fusion « produit » (le blanc disparaît) ; encre blanche = logo inversé, fusion « écran » */
.impression-logo {
  aspect-ratio: 1345 / 780;
  background: url("../images/merch/arrondi-novasphere-noir.webp") 51.3% 50.4% / 142.75% auto no-repeat;
}
.encre-noire { mix-blend-mode: multiply; opacity: 0.93; }
.encre-blanche { filter: invert(1); mix-blend-mode: screen; opacity: 0.96; }
/* Vinyle : l'illustration de NSX-2000 sur la pochette blanche de la photo, et le rond central du disque */
.impression-vinyle { inset: 0; width: auto; translate: none; transform: none; }
.vinyle-pochette {
  position: absolute;
  left: 13.95%;
  top: 23.1%;
  width: 55.3%;
  height: 53.1%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
/* étiquette du disque : son centre est caché sous la pochette (mesuré sur la photo : centre 66,4 % / 50,2 %,
   diamètre 18,1 %) ; seule la partie à droite du bord de la pochette (69,1 %) est visible */
.vinyle-rond {
  position: absolute;
  left: 66.4%;
  top: 50.2%;
  width: 18.1%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  clip-path: inset(0 0 0 65%);
  background: radial-gradient(circle, #3b3fd8 0 62%, #7fa8f5 63% 66%, #3b3fd8 67%);
}
/* Poster : posé dans l'ouverture du passe-partout de la photo du cadre */
.impression-poster { height: var(--h); transform: none; }
.impression-poster img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
/* Le poster seul, en grand */
.photo-poster > img { object-fit: contain; padding: 7%; filter: drop-shadow(0 18px 24px rgb(10 11 46 / 0.35)); }

/* ---------- Stickers (dessinés par le site) ---------- */
.photo-stickers { background: radial-gradient(70% 60% at 40% 30%, #dcdff7, var(--b-studio)); }
.sticker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--l);
  translate: -50% -50%;
  rotate: var(--r);
  filter: drop-shadow(0 4px 5px rgb(10 11 46 / 0.28));
}
.sticker::after {
  content: "";
  position: absolute;
  inset: 9%;
  background: center / contain no-repeat;
}
.sticker-ovale { aspect-ratio: 1.62; border-radius: 50%; background: #fff; }
.sticker-rond { aspect-ratio: 1; border-radius: 50%; background: #fff; }
.sticker-rond-noir { aspect-ratio: 1; border-radius: 50%; background: #0a0b2e; box-shadow: 0 0 0 3px #fff; }
.sticker-bleu { aspect-ratio: 1.45; border-radius: 16%; background: var(--ultra); box-shadow: 0 0 0 3px #fff; }
.sticker-chrome {
  aspect-ratio: 1.5;
  border-radius: 18%;
  background: linear-gradient(130deg, #eef0fb, #c9ccf0 22%, #b8f3ff 42%, #f4c9ff 58%, #fdfdff 72%, #b9c2ef);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.9);
}
.sticker-bleu::after, .sticker-rond-noir::after { filter: invert(1); mix-blend-mode: screen; }
.logo-nova::after { inset: 6%; background: url("../images/merch/arrondi-novasphere-noir.webp") 51.3% 50.4% / 142.75% auto no-repeat; }
.logo-ns::after { background-image: url("../images/merch/arrondi-ns-noir.webp"); background-size: 165%; }
.logo-orbite::after { background-image: url("../images/merch/orbite-novasphere-noir.webp"); background-size: 140%; }
.logo-ns-orbite::after { background-image: url("../images/merch/orbite-ns-noir.webp"); background-size: 160%; }
.logo-chrome::after { inset: 4%; background-image: url("../images/logo-novasphere.webp"); }
/* le sticker « bleu » mélange bien le logo inversé avec son fond : pas d'isolation nécessaire */
.sticker-bleu, .sticker-rond-noir { isolation: isolate; }

/* ---------- Fenêtres de la fiche et du panier (balise <dialog>) ---------- */
.fiche, .panier {
  padding: 0;
  border: 0;
  background: none;
  color: var(--b-texte);
  max-width: none;
  max-height: none;
  overflow: visible;
}
.fiche::backdrop, .panier::backdrop { background: rgb(10 11 46 / 0.45); backdrop-filter: blur(6px); }
.fenetre-fermer {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: rgb(255 255 255 / 0.14);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 50%;
  cursor: var(--curseur-main);
}
.fenetre-fermer:hover { background: rgb(255 255 255 / 0.32); }
.fiche .fenetre-barre::after, .panier .fenetre-barre::after { margin-left: 14px; }

/* Fiche */
.fiche { width: min(1060px, calc(100vw - 2 * var(--marge))); margin: auto; }
.fiche-fenetre { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
.fiche[open] .fiche-fenetre { animation: fiche-entre 0.45s var(--glisse); }
@keyframes fiche-entre { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.fiche-corps {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 46px);
  padding: clamp(18px, 3vw, 34px);
  overflow: auto;
}
.fiche-grande .photo { border-radius: 10px; box-shadow: 0 12px 30px rgb(10 11 46 / 0.2); }
.fiche-vignettes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.vignette {
  width: 68px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  background: none;
  cursor: var(--curseur-main);
  opacity: 0.75;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.vignette:hover { opacity: 1; }
.vignette[aria-pressed="true"] { opacity: 1; border-color: var(--ultra); }
.fiche-nom { font-family: var(--police-titre); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; margin: 4px 0 8px; }
.fiche-prix { font-size: 21px; font-weight: 600; margin: 0 0 16px; }
.fiche-description { margin: 0; line-height: 1.6; max-width: 46ch; }

.choix { border: 0; margin: 22px 0 0; padding: 0; min-inline-size: 0; }
.choix[hidden] { display: none; }
.choix legend, .choix-titre { display: block; padding: 0; margin-bottom: 9px; font-size: 13px; color: var(--b-doux); }
.choix legend span { color: var(--b-texte); }
.choix-options { display: flex; flex-wrap: wrap; gap: 9px; }
/* les vrais boutons radio sont cachés (mais restent utilisables au clavier) : on clique sur leur étiquette */
.pastille input, .taille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 15px 5px 5px;
  font-size: 14px;
  border: 1px solid var(--b-ligne);
  border-radius: 999px;
  cursor: var(--curseur-main);
}
.pastille-teinte {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teinte);
  box-shadow: inset 0 0 0 1px rgb(10 11 46 / 0.35);
}
[data-theme="sombre"] .pastille-teinte,
[data-theme="sombre"] .article-couleurs span { box-shadow: inset 0 0 0 1px rgb(230 242 220 / 0.45); }
.pastille:has(input:checked) { border-color: var(--ultra); box-shadow: inset 0 0 0 1px var(--ultra); }
.taille {
  min-width: 52px;
  height: 42px;
  display: grid;
  place-items: center;
  font-family: var(--police-titre);
  font-size: 13px;
  border: 1px solid var(--b-ligne);
  border-radius: 10px;
  cursor: var(--curseur-main);
  transition: background 0.25s ease, color 0.25s ease;
}
.taille:hover { border-color: var(--b-texte); }
.taille:has(input:checked) { background: var(--b-plein); color: var(--b-plein-texte); border-color: var(--b-plein); }
.pastille:has(input:focus-visible), .taille:has(input:focus-visible) { outline: 2px solid var(--ultra); outline-offset: 3px; }

.quantite { display: inline-flex; align-items: center; border: 1px solid var(--b-ligne); border-radius: 999px; }
.quantite button {
  width: 40px;
  height: 40px;
  font: inherit;
  font-size: 18px;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: var(--curseur-main);
}
.quantite button:hover { background: rgb(10 11 46 / 0.07); }
.quantite input {
  width: 42px;
  font: inherit;
  text-align: center;
  color: inherit;
  background: none;
  border: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.quantite input::-webkit-inner-spin-button, .quantite input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.pilule.pilule-pleine { color: var(--b-plein-texte); background: var(--b-plein); border-color: var(--b-plein); }
.pilule.pilule-pleine:hover { color: var(--halo); background: var(--ultra); border-color: var(--ultra); }
[data-theme="sombre"] .pilule.pilule-pleine:hover { color: #050705; }
.pilule.pilule-pleine:disabled { opacity: 0.6; cursor: wait; }
.fiche-ajouter { width: 100%; margin-top: 26px; padding: 15px 28px; font-size: 15px; }
.fiche-statut { min-height: 1.5em; margin: 10px 0 0; font-size: 14px; }
.lien-bouton {
  padding: 0;
  font: inherit;
  color: var(--ultra);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: var(--curseur-main);
}
.fiche-details {
  margin: 20px 0 0;
  padding: 16px 0 0 1.1em;
  border-top: 1px solid var(--b-ligne);
  font-size: 14px;
  line-height: 1.7;
}
.fiche-livraison { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--b-doux); }

/* Panier : il sort sur le côté droit, sur toute la hauteur */
.panier { width: min(430px, 100vw); height: 100dvh; margin: 0 0 0 auto; }
.panier-fenetre { height: 100%; display: flex; flex-direction: column; border-radius: 18px 0 0 18px; }
.panier[open] .panier-fenetre { animation: panier-entre 0.5s var(--glisse); }
@keyframes panier-entre { from { transform: translateX(100%); } }
.panier-corps { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panier-defile { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 8px 22px 6px; }
.panier-lignes { list-style: none; margin: 0; padding: 0; }
.ligne {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--b-ligne);
}
.ligne-photo .photo { border-radius: 8px; }
.ligne-infos { display: grid; gap: 3px; }
.ligne-nom { font-family: var(--police-titre); font-size: 13px; line-height: 1.35; }
.ligne-variante { font-size: 13px; color: var(--b-doux); }
.ligne-quantite { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; }
.ligne-quantite button {
  width: 28px;
  height: 28px;
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--b-ligne);
  border-radius: 50%;
  cursor: var(--curseur-main);
}
.ligne-fin { display: grid; justify-items: end; gap: 6px; }
.ligne-prix { font-size: 14px; font-weight: 600; }
.ligne-fin .lien-bouton { font-size: 12px; }
.panier-vide { margin: auto; text-align: center; }
.panier-vide p { margin: 0 0 16px; }
.panier-vide[hidden], .panier-pied[hidden], .panier-zone[hidden] { display: none; }
.panier-pied { padding: 14px 22px 20px; border-top: 1px solid var(--b-ligne); }
/* zone de livraison : le client la choisit avant de payer (forfait par commande) */
.panier-zone { margin: 20px 0 8px; }
.zones { display: grid; gap: 6px; }
.zone {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  font-size: 14px;
  border: 1px solid var(--b-ligne);
  border-radius: 10px;
  cursor: var(--curseur-main);
}
.zone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zone:has(input:checked) { border-color: var(--ultra); box-shadow: inset 0 0 0 1px var(--ultra); }
.zone:has(input:focus-visible) { outline: 2px solid var(--ultra); outline-offset: 3px; }
.zone-prix { color: var(--b-doux); }
.panier-ligne-total { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 14px; color: var(--b-doux); }
.panier-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--b-ligne);
  font-size: 16px;
}
.panier-total strong { font-family: var(--police-titre); font-weight: 400; font-size: 18px; }
.panier-note { margin: 6px 0 18px; font-size: 13px; color: var(--b-doux); }
.panier-payer { width: 100%; padding: 15px 28px; font-size: 15px; }
.panier-statut { min-height: 1.5em; margin: 10px 0 0; font-size: 13px; }

/* ---------- Écrans plus petits ---------- */
@media (max-width: 960px) {
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-vedette { grid-row: auto; }
}
@media (max-width: 760px) {
  .fiche { width: 100vw; height: 100dvh; margin: 0; }
  .fiche-fenetre { max-height: 100dvh; height: 100%; border-radius: 0; }
  .fiche-corps { grid-template-columns: 1fr; }
  .panier-fenetre { border-radius: 0; }
}
@media (max-width: 480px) {
  .vitrine { gap: 24px 14px; }
  .article-nom { font-size: 12px; }
  .article-indispo { padding: 4px 8px 4px 7px; font-size: 8.5px; letter-spacing: 0.06em; } /* tient sur une ligne */
  .article:has(.article-indispo) .article-couleurs { top: 30px; }
  .article-texte { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fiche[open] .fiche-fenetre, .panier[open] .panier-fenetre { animation: none; }
  .article-cadre { transition: none; }
}