/* ─── La Galerie des monuments — DzairNa ─────────────────────────────────────
   ADN : plan de cinéma 2,4:1, bandes noires, sol mouillé, un seul objet net,
   énormément de vide. L'interface vit dans les bandes et dans le vide du plan. */

/* page autonome : palette DzairNa (BRAND.md) */
:root {
  --velours: #14100f;
  --encre: #0e0b0a;
  --creme: #f8efe2;
  --sable: #c9ac88;
  --or: #dba94f;
  --or-pale: #f0cf86;
  --doux: cubic-bezier(0.2, 0.7, 0.1, 1);
  --font-display: "Playfair Display";
  --font-body: "DM Sans";
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e0b0a; }
[hidden] { display: none !important; }
img { max-width: 100%; }

.racine {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: minmax(3.5rem, 1fr) auto minmax(4.75rem, 1fr);
  background: var(--encre);
  color: var(--creme);
  font-family: var(--font-body), system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* remise à zéro sans spécificité : les classes (.plaqueOr…) gardent la main */
:where(.racine, .fiche) :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
:where(.racine, .fiche) :focus-visible {
  outline: 1px solid var(--or);
  outline-offset: 4px;
}

/* ─── bandes ─────────────────────────────────────────────────────────────── */
.barreHaut,
.barreBas {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
  padding: 0 clamp(1rem, 3.2vw, 2.75rem) 0.95rem;
}
.barreBas {
  align-items: start;
  padding-top: 1.05rem;
  padding-bottom: 0;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--creme);
  text-decoration: none;
}
.marque img {
  opacity: 0.9;
}

.collection,
.titreCourant,
.lienEcrin,
.surtitre,
.plaqueOr,
.plaqueMate,
.plaqueOrLigne,
.lienFin {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.collection {
  margin: 0;
  color: rgba(201, 172, 136, 0.62);
}

.lienEcrin {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--creme);
  transition: color 0.3s;
}
.lienEcrin:hover {
  color: var(--or-pale);
}
.compteur {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border: 1px solid rgba(219, 169, 79, 0.6);
  color: var(--or);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.titreCourant {
  margin: 0;
  justify-self: start;
  color: rgba(248, 239, 226, 0.78);
}
.titreCourant span {
  color: var(--or);
  margin-right: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* frise : les chapitres du voyage (chiffre romain) et un repère par station ; la tête de lecture
   (losange amazigh) glisse avec la caméra */
.frise {
  position: relative;
  width: clamp(240px, 40vw, 640px);
  padding-top: 2px;
}
.frise ol {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.frise .chap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chapNum {
  height: 12px;
  margin: 0 0 3px 1px;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(201, 172, 136, 0.55);
}
.traits {
  display: flex;
}
.frise button {
  display: grid;
  place-items: start center;
  flex: 1 1 0;
  min-width: 3px;
  height: 22px;
  padding: 0;
}
.frise i {
  display: block;
  width: 1px;
  height: 8px;
  background: rgba(201, 172, 136, 0.38);
  transition: height 0.4s var(--doux), background 0.4s;
}
.frise button.t-porte i {
  height: 11px;
  background: rgba(219, 169, 79, 0.55);
}
.frise button:hover i {
  height: 13px;
  background: var(--sable);
}
.frise button[aria-current] i {
  height: 15px;
  background: var(--or);
}
.tete {
  position: absolute;
  top: 36px;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}
.tete::before {
  content: "";
  position: absolute;
  left: -3.5px;
  top: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--or);
  transform: rotate(45deg);
}

.fleches {
  justify-self: end;
  display: flex;
  gap: 1.4rem;
}
.fleches button {
  font-size: 1rem;
  color: var(--creme);
  opacity: 0.8;
  transition: opacity 0.3s, color 0.3s;
}
.fleches button:hover {
  color: var(--or-pale);
  opacity: 1;
}
.fleches button:disabled {
  opacity: 0.18;
  cursor: default;
}

/* ─── scène : le plan 2,4:1 ──────────────────────────────────────────────── */
.scene {
  position: relative;
  justify-self: center;
  align-self: center;
  width: min(100vw, calc((100dvh - 8.25rem) * 2.4));
  aspect-ratio: 2.4 / 1;
  container-type: size;
  touch-action: none;
}
.cadre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--velours);
}
.toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.calque {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.calque > * {
  pointer-events: auto;
}

/* mise au point : le texte apparaît quand la caméra se pose */
.calque :is(.surtitre, .titre, .lieu, .details, .lienFin, .boutonOr, .mention, .plaqueOr, .plaqueMate,
  .plaqueOrLigne, .accroche, .sousAccroche, .motSol, .bloc, .lignes, .totaux, .prixCartel, .actionsCartel) {
  opacity: 0;
  filter: blur(9px);
  translate: 0 0.7cqh;
  transition: opacity 0.22s ease, filter 0.22s ease, translate 0.22s ease;
}
.calque[data-arrive] :is(.surtitre, .titre, .lieu, .details, .lienFin, .boutonOr, .mention, .plaqueOr,
  .plaqueMate, .plaqueOrLigne, .accroche, .sousAccroche, .motSol, .bloc, .lignes, .totaux, .prixCartel, .actionsCartel) {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
  transition: opacity 1.1s var(--doux) var(--d, 0ms), filter 1.3s var(--doux) var(--d, 0ms),
    translate 1.3s var(--doux) var(--d, 0ms);
}

/* ─── typographie de cartel ──────────────────────────────────────────────── */
.surtitre {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.4cqh;
  font-size: max(10.5px, 1.45cqh);
  color: var(--sable);
}
.surtitre::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: rgba(219, 169, 79, 0.7);
}
.titre {
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 600;
  font-size: max(26px, 6.1cqh);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--creme);
  text-wrap: balance;
}
.lieu {
  margin: 1.5cqh 0 0;
  font-size: max(13px, 1.95cqh);
  color: var(--sable);
}
.details {
  margin: 0.8cqh 0 0;
  font-size: max(13px, 1.8cqh);
  line-height: 1.55;
  color: rgba(248, 239, 226, 0.72);
}
.mention {
  margin: 2.2cqh 0 0;
  font-size: max(11px, 1.4cqh);
  line-height: 1.5;
  color: rgba(201, 172, 136, 0.62);
  font-style: italic;
}
.lienFin {
  display: inline-block;
  margin-top: 2.6cqh;
  padding: 0 0 0.45em;
  font-size: max(10.5px, 1.4cqh);
  color: var(--creme);
  text-decoration: none;
  background: linear-gradient(var(--or), var(--or)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.5s var(--doux), color 0.3s;
}
.lienFin:hover {
  color: var(--or-pale);
  background-size: 35% 1px;
}
/* « Voir la pièce », « Voir le produit » : le même bouton que « Rejoindre » (barre du haut), à l'échelle du plan ;
   relief : voir « boutons dorés en relief » plus bas */
.boutonOr {
  display: inline-flex;
  align-items: center;
  margin-top: 2.6cqh;
  padding: max(10px, 1.55cqh) max(18px, 2.9cqh);
  border-radius: 9px;
  font-size: max(13px, 1.75cqh);
  font-weight: 600;
  white-space: nowrap;
  color: #14100f !important;
  text-decoration: none;
}

.cartel {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: min(calc(var(--l, 0.3) * 100cqw), 30rem);
}

/* ─── plaques posées au sol ──────────────────────────────────────────────── */
.plaqueOr,
.plaqueMate {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55cqh;
  padding: 1.2cqh 1.7cqh 1.1cqh;
  font-size: max(10px, 1.3cqh);
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(24, 19, 17, 0.94), rgba(12, 9, 8, 0.97));
  box-shadow: 0 1.4cqh 2.6cqh -1.2cqh rgba(0, 0, 0, 0.9);
  -webkit-box-reflect: below 1px linear-gradient(transparent 45%, rgba(255, 255, 255, 0.16));
}
.plaqueOr {
  color: var(--or);
  border: 1px solid rgba(219, 169, 79, 0.55);
  transition: border-color 0.4s, box-shadow 0.6s var(--doux), color 0.3s;
}
.plaqueOr::after {
  /* lumière dorée qui tombe sur la pierre mouillée */
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 100%;
  height: 4cqh;
  background: radial-gradient(50% 60% at 50% 0%, rgba(219, 169, 79, 0.18), transparent 70%);
  pointer-events: none;
}
.plaqueOr:hover:not(:disabled) {
  border-color: var(--or);
  color: var(--or-pale);
  box-shadow: 0 1.4cqh 2.6cqh -1.2cqh rgba(0, 0, 0, 0.9), 0 0 3cqh -0.6cqh rgba(219, 169, 79, 0.45);
}
.plaqueOr[data-pose] {
  border-color: var(--or-pale);
  box-shadow: 0 0 4cqh -0.4cqh rgba(240, 207, 134, 0.55);
}
.plaqueOr:disabled {
  cursor: default;
  opacity: 0.55;
}
.plaquePrix {
  font-size: max(15px, 2.3cqh);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--or-pale);
  font-variant-numeric: tabular-nums;
}
.plaqueMate {
  color: rgba(201, 172, 136, 0.72);
  border: 1px solid rgba(201, 172, 136, 0.22);
}

/* ─── ouverture ──────────────────────────────────────────────────────────── */
.ouverture {
  position: absolute;
  inset: 0;
}
.ouverture > .surtitre {
  position: absolute;
  left: 7.5%;
  top: 15%;
}
.accroche {
  position: absolute;
  left: 7.5%;
  top: calc(15% + 4.2cqh);
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: max(20px, 4.4cqh);
  color: var(--creme);
}
.sousAccroche {
  position: absolute;
  left: 7.5%;
  top: calc(15% + 11.5cqh);
  width: min(30cqw, 26rem);
  margin: 0;
  font-size: max(13px, 1.8cqh);
  line-height: 1.6;
  color: rgba(248, 239, 226, 0.7);
}
.motSol {
  position: absolute;
  left: 7%;
  bottom: 13.6%;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 600;
  font-size: max(44px, 15cqh);
  line-height: 0.78;
  letter-spacing: -0.02em;
  color: rgba(248, 239, 226, 0.92);
  pointer-events: none;
}
.motReflet {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.02em;
  transform: scaleY(-0.8);
  transform-origin: top;
  opacity: 0.2;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 75%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 75%);
}

/* ─── l'écrin ────────────────────────────────────────────────────────────── */
.ecrin {
  position: absolute;
  left: 5cqw;
  top: 7cqh;
  bottom: 7cqh;
  width: min(36cqw, 30rem);
  min-width: 18.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3.4cqh 2.4cqw 3cqh;
  background: rgba(14, 11, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(219, 169, 79, 0.16);
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 172, 136, 0.3) transparent;
}
.bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.lignes {
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}
.lignes li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(201, 172, 136, 0.14);
}
/* chaque ligne du panier montre la pièce choisie */
.lignes li.avecImage { grid-template-columns: 4.2rem 1fr auto; }
.ligneImage { grid-row: span 3; width: 4.2rem; height: 5.2rem; object-fit: cover; border: 1px solid rgba(201, 172, 136, 0.18); background: #151110; }
.lignes li.avecImage .ligneNom, .lignes li.avecImage .retirer { grid-column: 2 / -1; }
.ligneNom {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--creme);
}
.qte {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--sable);
}
.qte button {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(201, 172, 136, 0.3) !important;
  color: var(--creme);
  line-height: 1;
}
.qte button:disabled {
  opacity: 0.3;
  cursor: default;
}
.lignePrix {
  justify-self: end;
  align-self: center;
  font-variant-numeric: tabular-nums;
  color: var(--creme);
}
.retirer {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 0.68rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 172, 136, 0.6) !important;
}
.retirer:hover {
  color: var(--sable) !important;
}
.totaux {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem 1rem;
  margin: 0.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 172, 136, 0.14);
  font-size: 0.88rem;
  color: var(--sable);
}
.totaux dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--creme);
}
.total {
  font-size: 1.15rem;
  color: var(--or-pale) !important;
}
.plaqueOrLigne {
  display: inline-flex;
  justify-content: center;
  margin-top: 1.6rem;
  padding: 0.95rem 1.4rem;
  font-size: 0.7rem;
  color: var(--or) !important;
  border: 1px solid rgba(219, 169, 79, 0.55) !important;
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s, box-shadow 0.5s;
}
.plaqueOrLigne:hover:not(:disabled) {
  border-color: var(--or) !important;
  color: var(--or-pale) !important;
  box-shadow: 0 0 2.2rem -0.6rem rgba(219, 169, 79, 0.4);
}
.plaqueOrLigne:disabled {
  opacity: 0.4;
  cursor: default;
}
.formulaire {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.6rem;
}
.formulaire label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.formulaire label > span {
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sable);
}
.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  padding: 0.45rem 0 0.55rem;
  font: inherit;
  font-size: 16px;
  color: var(--creme);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(201, 172, 136, 0.35);
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s;
}
.formulaire select option {
  background: var(--velours);
}
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  border-bottom-color: var(--or);
}
.formulaire [aria-invalid="true"] {
  border-bottom-color: #c0563a;
}
.formulaire em {
  font-size: 0.78rem;
  font-style: normal;
  color: #e08a70;
}
.erreur {
  margin: 0;
  padding: 0.8rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--creme);
  border-left: 2px solid #c0563a;
  background: rgba(192, 86, 58, 0.08);
}

/* ─── fiche (la vraie photo) ─────────────────────────────────────────────── */
.fiche {
  font-family: var(--font-body), system-ui, sans-serif;
  color: var(--creme);
  -webkit-font-smoothing: antialiased;
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 6, 6, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fondu 0.6s var(--doux);
}
@keyframes fondu {
  from { opacity: 0; }
}
.ficheCorps {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(18rem, 26rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  max-height: 100%;
  overflow: auto;
}
.photo {
  margin: 0;
}
.photo img {
  display: block;
  max-height: 78dvh;
  max-width: 44vw;
  object-fit: contain;
  border: 1px solid rgba(201, 172, 136, 0.18);
}
.photo figcaption {
  margin-top: 0.8rem;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sable);
}
.ficheTexte .titre {
  font-size: clamp(2rem, 4vw, 3.2rem);
}
.ficheTexte .lieu {
  font-size: 1rem;
}
.ficheTexte .mention,
.ficheTexte .lienFin,
.ficheTexte .surtitre {
  font-size: 0.72rem;
}
.specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem 1.4rem;
  margin: 1.8rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201, 172, 136, 0.16);
  font-size: 0.92rem;
}
.specs dt {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sable);
  padding-top: 0.2rem;
}
.specs dd {
  margin: 0;
  color: var(--creme);
}
.prixFiche {
  color: var(--or-pale) !important;
  font-variant-numeric: tabular-nums;
}

/* ─── rideau de chargement ───────────────────────────────────────────────── */
.rideau {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: var(--encre);
  transition: opacity 1.4s var(--doux), visibility 0s linear 1.4s;
}
.rideau[data-leve] {
  opacity: 0;
  visibility: hidden;
}
.rideauNom {
  font-family: var(--font-display), Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--creme);
}
.rideauLigne {
  width: 7rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  background-size: 200% 100%;
  animation: balayage 1.6s linear infinite;
}
@keyframes balayage {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
/* ─── écrans étroits / portrait : le plan occupe tout l'écran, le cartel se pose en bas par-dessus ─────────
   (comme sur ordinateur ; la caméra s'incline pour que la pièce reste au-dessus du texte : vitrine.js, poses) */
@media (max-aspect-ratio: 1/1) {
  .racine {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .barreHaut {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
    grid-template-columns: 1fr auto;
  }
  .collection {
    display: none;
  }
  .scene {
    position: relative;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .cadre {
    position: absolute;
    inset: 0;
    container-type: size;
    touch-action: none;
  }
  /* le texte en bas, sur un dégradé sombre qui part du plan : lisible sans couper l'image en deux */
  .calque {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 64%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4.5rem 1.25rem 1rem;
    container-type: inline-size;
    pointer-events: auto;
    touch-action: pan-y;
    background: linear-gradient(to bottom, rgba(12, 9, 8, 0) 0, rgba(12, 9, 8, 0.72) 4.5rem, rgba(12, 9, 8, 0.9) 100%);
  }
  .calque > *,
  .ouverture > *,
  .cartel,
  .ecrin {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .ouverture {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
  .motSol {
    order: -1;
    font-size: 3.4rem;
    margin-bottom: 1.2rem;
  }
  .motReflet {
    position: absolute !important;
  }
  .surtitre { font-size: 0.66rem; margin-bottom: 0.8rem; }
  .titre { font-size: 2.1rem; }
  .accroche { font-size: 1.35rem; }
  .lieu, .details, .sousAccroche { font-size: 0.92rem; }
  .mention { font-size: 0.78rem; }
  .lienFin { font-size: 0.68rem; margin-top: 1.1rem; }
  .boutonOr { font-size: 0.88rem; margin-top: 1.1rem; }
  .plaqueOr,
  .plaqueMate {
    margin-top: 1.4rem;
    padding: 0.8rem 1.1rem;
    font-size: 0.66rem;
    align-self: flex-start;
    -webkit-box-reflect: unset;
  }
  .plaquePrix { font-size: 1.05rem; }
  .ecrin {
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
    overflow: visible;
  }
  .barreBas {
    grid-template-columns: 1fr auto;
    padding: 0.8rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
    border-top: 1px solid rgba(201, 172, 136, 0.1);
  }
  .titreCourant {
    display: none;
  }
  .frise {
    width: auto;
    justify-self: stretch;
  }
  .ficheCorps {
    grid-template-columns: 1fr;
  }
  .photo img {
    max-width: 100%;
    max-height: 48dvh;
  }
}

/* ─── Sarimbatim : barre du haut, la même que DzairNa (Navbar) ─────────────────
   marque à gauche · liens au centre · recherche, panier, Connexion / Rejoindre à droite, sur une ligne */
.barreHaut { align-items: center; padding-top: 0.35rem; padding-bottom: 0.35rem; }
.barreHaut .marque { gap: 0.6rem; font-size: 1.3rem; letter-spacing: -0.02em; }
.barreHaut .marque img { opacity: 1; }
.menuHaut { display: flex; align-items: center; gap: 4px; justify-self: center; }
.menuHaut a {
  padding: 8px 16px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--sable);
  text-decoration: none; white-space: nowrap; transition: color 0.2s, background-color 0.2s;
}
.menuHaut a:hover { color: var(--creme); background: rgba(247, 239, 228, 0.05); }
.menuHaut a[aria-current] { color: var(--creme); }
.entete {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rondHaut {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  color: var(--sable); transition: background-color 0.2s, color 0.2s;
}
.rondHaut:hover { background: rgba(247, 239, 228, 0.06); color: var(--creme); }
.rondHaut .compteur {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border: 0; border-radius: 9px;
  background: var(--or); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0;
}
.pilHaut {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 9px; font-size: 13px; white-space: nowrap;
  text-decoration: none; transition: all 0.2s ease;
}
.pilHaut.pilContour { color: var(--creme); font-weight: 500; } /* relief : « boutons neutres en relief » plus bas */
.pilHaut.pilOr { color: #14100f; font-weight: 600; }
@media (max-width: 900px) { .menuHaut a { padding: 8px 10px; } .cacheEtroit { display: none !important; } }
@media (max-width: 640px) { .menuHaut { display: none; } }
a.lienEcrin {
  text-decoration: none;
}
.ecrin[data-cote="droite"] {
  left: auto;
  right: 5cqw;
}

/* ─── fiche dans le décor : la caméra plonge vers la pièce ───────────────── */
/* la caméra s'approche de la pièce (moteur) ; un voile assombrit les bords, et un autre la pièce, derrière
   le cartel (une pièce blanche resterait claire sous le texte) */
.cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(34% 62% at 79% 52%, rgba(8, 6, 6, 0.55), rgba(8, 6, 6, 0.3) 55%, transparent),
    radial-gradient(70% 80% at 50% 60%, transparent 40%, rgba(8, 6, 6, 0.5));
  opacity: 0;
  transition: opacity 1.2s var(--doux);
}
body.enFiche .cadre::after {
  opacity: 1;
}
/* la fiche occupe tout le plan : la planche des photos à gauche (vignettes en colonne, grande photo),
   le cartel à droite ; la caméra a porté la pièce derrière le cartel et l'a assombrie */
.ficheScene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: 4.5cqw;
  align-items: center;
  padding: 6cqh 5cqw 6cqh 4cqw;
}
.planche {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2cqh;
  min-width: 0;
}
/* la place de la photo ne change pas d'une photo à l'autre : les vignettes et le cartel ne bougent pas */
.planche .principale {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  height: 76cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.planche .principale button {
  display: block;
  max-width: 100%;
  padding: 0.7cqh;
  background: linear-gradient(160deg, #1d1714, #0c0908);
  border: 1px solid rgba(219, 169, 79, 0.3) !important;
  box-shadow: 0 3cqh 5cqh -2cqh rgba(0, 0, 0, 0.95), 0 0 0 0.3cqh #0e0b0a inset;
  cursor: zoom-in;
}
.planche .principale img {
  display: block;
  max-height: 68cqh;
  max-width: 100%;
  width: auto;
  height: auto;
}
.planche figcaption {
  margin-top: 1.4cqh;
  font-size: max(10px, 1.3cqh);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sable);
}
.vignettesFiche {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1.3cqh;
}
.vignettesFiche button {
  width: max(46px, 10.5cqh);
  height: max(46px, 10.5cqh);
  padding: 0;
  border: 1px solid rgba(201, 172, 136, 0.22) !important;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.3s, border-color 0.3s;
}
.vignettesFiche button:hover { opacity: 0.85; }
.vignettesFiche button[aria-current] { opacity: 1; border-color: var(--or) !important; }
.vignettesFiche img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cartel.cartelFiche {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  max-width: 34rem;
  max-height: 88cqh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 172, 136, 0.3) transparent;
}
/* le texte est posé sur la pièce assombrie : une ombre douce le détache */
.cartelFiche :is(.surtitre, .titre, .probatoire, .mention, .chapoFiche, .lieu, .specs, .prixFiche, .etatFiche) {
  text-shadow: 0 0.2cqh 1.8cqh rgba(0, 0, 0, 0.85);
}
.cartelFiche .surtitre { font-size: max(11px, 1.6cqh); }
.cartelFiche .titre { font-size: max(32px, 7.4cqh); }
.probatoire {
  margin: 1.6cqh 0 0;
  font-size: max(12.5px, 1.7cqh);
  font-style: italic;
  line-height: 1.5;
  color: rgba(201, 172, 136, 0.9);
}
.cartelFiche .mention { font-size: max(12.5px, 1.7cqh); margin-top: 1.6cqh; }
.chapoFiche {
  margin: 2cqh 0 0;
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-size: max(17px, 2.7cqh);
  line-height: 1.45;
  color: var(--creme);
}
.cartelFiche .lieu { margin-top: 1.8cqh; font-size: max(16px, 2.5cqh); }
.cartelFiche .specs {
  font-size: max(14.5px, 2.15cqh);
  gap: 1.1cqh 2.2cqh;
  margin-top: 2.4cqh;
  padding-top: 2cqh;
}
.cartelFiche .specs dt { font-size: max(10.5px, 1.4cqh); padding-top: 0.3em; }
.ficheActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4cqh 2.6cqh;
  margin-top: 2.6cqh;
  padding-top: 2.4cqh;
  border-top: 1px solid rgba(201, 172, 136, 0.14);
}
.ficheActions .plaqueOrLigne {
  margin-top: 0;
  padding: max(13px, 2.1cqh) max(22px, 3.4cqh);
  font-size: max(11px, 1.5cqh);
  background: rgba(14, 11, 10, 0.45);
}
.prixFiche {
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: max(27px, 4.8cqh);
  color: var(--or-pale);
  font-variant-numeric: tabular-nums;
}
.etatFiche { margin: 0; font-size: max(14px, 2cqh); color: var(--sable); }
.ficheLiens { display: flex; flex-wrap: wrap; gap: 1.4cqh 2.4cqh; margin-top: 2cqh; }
.ficheLiens .boutonOr { margin-top: 0.4cqh; }
/* revenir à la galerie : une icône au coin supérieur droit du plan */
.fermerFiche {
  position: absolute; top: 2.6cqh; right: 1.6cqw; display: grid; place-items: center;
  width: max(34px, 5.4cqh); height: max(34px, 5.4cqh); border-radius: 10px;
  color: var(--creme); background: rgba(14, 11, 10, 0.55) !important; border: 1px solid rgba(219, 169, 79, 0.35) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s ease, border-color 0.3s, color 0.3s, background-color 0.3s;
}
.calque[data-arrive] .fermerFiche { opacity: 1; transition: opacity 0.9s var(--doux) 400ms, border-color 0.3s, color 0.3s, background-color 0.3s; }
.fermerFiche:hover { color: var(--or-pale); border-color: var(--or) !important; background: rgba(14, 11, 10, 0.8) !important; }
.calque :is(.probatoire, .chapoFiche, .specs, .ficheActions, .ficheLiens) {
  opacity: 0;
  filter: blur(9px);
  transition: opacity 0.22s ease, filter 0.22s ease;
}
.calque[data-arrive] :is(.probatoire, .chapoFiche, .specs, .ficheActions, .ficheLiens) {
  opacity: 1;
  filter: blur(0);
  transition: opacity 1.2s var(--doux) var(--d, 0ms), filter 1.4s var(--doux) var(--d, 0ms);
}
/* la planche de photos apparaît sans flou (un flou CSS sur une grande image coûte cher à la carte graphique) */
.calque .planche {
  opacity: 0;
  transform: translateY(1.2cqh);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.calque[data-arrive] .planche {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--doux) var(--d, 0ms), transform 1.3s var(--doux) var(--d, 0ms);
}

/* visionneuse : la photo en grand */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 5, 4, 0.94);
  animation: fondu 0.4s var(--doux);
  cursor: zoom-out;
}
.visionneuse figure { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.visionneuse img { max-width: 92vw; max-height: 82vh; object-fit: contain; border: 1px solid rgba(219, 169, 79, 0.25); }
.visionneuse figcaption { font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sable); }
.visionneuse button {
  position: absolute;
  font: inherit;
  color: var(--creme);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.8;
}
.visionneuse button:hover { opacity: 1; color: var(--or-pale); }
.visionneuse .vPrec, .visionneuse .vSuiv { top: 50%; font-size: 1.6rem; padding: 1rem; transform: translateY(-50%); }
.visionneuse .vPrec { left: 1rem; }
.visionneuse .vSuiv { right: 1rem; }
.visionneuse .vFermer { top: 1.2rem; right: 1.6rem; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; }

@media (max-aspect-ratio: 1/1) {
  .cadre::after { background: radial-gradient(70% 80% at 50% 60%, transparent 40%, rgba(8, 6, 6, 0.5)); }
  .ficheScene { position: static; display: flex; flex-direction: column; gap: 1.4rem; padding: 0; }
  .planche, .cartel.cartelFiche { position: static !important; width: auto !important; max-height: none; overflow: visible; }
  .planche { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
  .planche .principale { height: auto; }
  .planche .principale img { max-height: 46dvh; }
  .vignettesFiche { flex-direction: row; }
  .vignettesFiche button { width: 3.2rem; height: 3.2rem; }
  .cartelFiche .titre { font-size: 2rem; }
  .cartelFiche .specs { font-size: 0.9rem; }
  .chapoFiche { font-size: 1.05rem; }
  .fermerFiche { position: sticky; top: 0; order: -1; align-self: flex-end; margin-bottom: -0.8rem; width: 40px; height: 40px; z-index: 2; }
  .barreHaut { grid-template-columns: auto 1fr; }
  .menuHaut, .cacheEtroit { display: none !important; }
  .entete { gap: 6px; }
}

/* ─── portes de chapitre : la caméra s'est retournée vers la ville suivante ──────────────────── */
.porte {
  position: absolute;
  top: 17%;
  width: min(33cqw, 30rem);
}
.porte[data-cote="gauche"] { left: 6.5cqw; }
.porte[data-cote="droite"] { right: 6.5cqw; text-align: right; }
.porte[data-cote="droite"] .surtitre { justify-content: flex-end; }
.titrePorte {
  font-size: max(30px, 7.2cqh);
  text-shadow: 0 0.4cqh 3cqh rgba(0, 0, 0, 0.55);
}
.porte .accroche {
  position: static;
  width: auto;
  margin: 2cqh 0 0;
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: max(17px, 3.1cqh);
  line-height: 1.3;
  color: var(--creme);
  text-shadow: 0 0.3cqh 2cqh rgba(0, 0, 0, 0.6);
}
.porte .details {
  margin-top: 1.6cqh;
  color: var(--sable);
}
.porte .lienFin {
  margin-top: 3cqh;
}
/* le bouton « Entrer » des chapitres : le même que celui de l'ouverture (plaque dorée), dans le bloc de texte */
.porte .entrer {
  position: relative;
  margin-top: 3.4cqh;
}
.calque :is(.chapitreOuverture) {
  opacity: 0;
  filter: blur(9px);
  transition: opacity 0.22s ease, filter 0.22s ease;
}
.calque[data-arrive] :is(.chapitreOuverture) {
  opacity: 1;
  filter: blur(0);
  transition: opacity 1.1s var(--doux) var(--d, 0ms), filter 1.3s var(--doux) var(--d, 0ms);
}
.ouverture .surtitre,
.ouverture .accroche,
.ouverture .sousAccroche {
  text-shadow: 0 0.3cqh 2.4cqh rgba(0, 0, 0, 0.7);
}
.ouverture .motSol {
  text-shadow: 0 0.6cqh 4cqh rgba(0, 0, 0, 0.5);
}
.chapitreOuverture {
  position: absolute;
  left: 7.5%;
  bottom: 6.5%;
  margin: 0;
  font-size: max(10px, 1.35cqh);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(248, 239, 226, 0.7);
}
.chapitreOuverture span {
  color: var(--or);
  margin-right: 0.6em;
}
.ouverture .entrer {
  left: auto;
  right: 7%;
  bottom: 12%;
}

/* sans WebGL 2 : message seul */
body.sansWebGL .cadre { background: var(--velours); }

@media (max-aspect-ratio: 1/1) {
  .porte { position: static; width: auto; text-align: left !important; }
  .porte .surtitre { justify-content: flex-start !important; }
  .titrePorte { font-size: 2.2rem; }
  .porte .accroche { font-size: 1.2rem; }
  .chapitreOuverture { position: static; }
  .frise { width: auto; }
  .chapNum { display: none; }
}

/* titre courant : une seule ligne, même pour les noms longs */
.titreCourant {
  max-width: 30vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* index des pièces (liens vers les fiches) : lu par les lecteurs d'écran et les moteurs,
   la galerie visuelle le remplace à l'écran */
.indexPieces {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.lienCatalogue { opacity: 0.8; }

/* ─── boutons dorés en relief (3D léger), tout AUTOUR du bouton (pas d'épaisseur dessous) : un liseré de métal poli
   (clair en haut et en bas, plus sombre au milieu), une arête claire à l'intérieur, les bords légèrement creusés,
   un filet sombre qui détache le bouton et un halo doré régulier ; au survol un reflet le traverse.
   Les couleurs viennent de --or, --or-pale, --or-fonce (à changer ensemble). ── */
:root { --or-fonce: #997637; }
.boutonOr,
.pilHaut.pilOr {
  position: relative;
  overflow: hidden;
  border: 1.5px solid transparent !important;
  background: linear-gradient(180deg, var(--or-pale) 0%, var(--or) 50%, var(--or-fonce) 100%) padding-box,
    linear-gradient(180deg, #fff4d6 0%, var(--or-fonce) 50%, #fbe6b4 100%) border-box !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 0 7px rgba(110, 84, 40, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px 1px rgba(219, 169, 79, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.boutonOr::after,
.pilHaut.pilOr::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.boutonOr:hover,
.pilHaut.pilOr:hover {
  transform: scale(1.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 0 7px rgba(110, 84, 40, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 20px 3px rgba(219, 169, 79, 0.45);
}
.boutonOr:hover::after,
.pilHaut.pilOr:hover::after { left: 120%; }
.boutonOr:active,
.pilHaut.pilOr:active {
  transform: scale(0.98);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(110, 84, 40, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 8px rgba(219, 169, 79, 0.25);
}
/* dans le plan, l'apparition du texte (opacité, flou, glissé) garde sa transition ; le relief garde la sienne */
.calque[data-arrive] .boutonOr {
  transition: opacity 1.1s var(--doux) var(--d, 0ms), filter 1.3s var(--doux) var(--d, 0ms),
    translate 1.3s var(--doux) var(--d, 0ms), transform 0.2s ease, box-shadow 0.2s ease;
}
/* boutons dorés à contour (« Ajouter au panier », « Entrer », plaques posées sur la table) : un cadre en relief tout
   autour — le filet doré, doublé dedans d'un filet sombre puis d'une arête claire, un filet sombre dehors et un halo */
.plaqueOr,
.plaqueOrLigne {
  border-color: rgba(240, 207, 134, 0.8) !important;
  background: linear-gradient(180deg, rgba(40, 32, 24, 0.95), rgba(14, 11, 10, 0.97)) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(240, 207, 134, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(219, 169, 79, 0.18);
}
.plaqueOr:hover:not(:disabled),
.plaqueOrLigne:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(240, 207, 134, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 20px 2px rgba(219, 169, 79, 0.4);
}
.plaqueOr[data-pose] { border-color: var(--or-pale) !important; }
/* boutons neutres en relief (« Connexion ») : le même relief tout autour, en clair ; au survol, le liseré devient doré */
.pilHaut.pilContour {
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, rgba(40, 32, 26, 0.9), rgba(14, 11, 10, 0.95)) padding-box,
    linear-gradient(180deg, rgba(247, 239, 228, 0.38), rgba(247, 239, 228, 0.08) 50%, rgba(247, 239, 228, 0.26)) border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(247, 239, 228, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.pilHaut.pilContour:hover {
  color: var(--or-pale);
  transform: scale(1.02);
  background: linear-gradient(180deg, rgba(48, 38, 28, 0.95), rgba(14, 11, 10, 0.97)) padding-box,
    linear-gradient(180deg, #fff4d6 0%, var(--or-fonce) 50%, #fbe6b4 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 16px 2px rgba(219, 169, 79, 0.35);
}
/* fermer la fiche (×) : le cadre doré en relief, comme les boutons dorés à contour */
.fermerFiche {
  border-color: rgba(240, 207, 134, 0.8) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(240, 207, 134, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(219, 169, 79, 0.18);
}
.fermerFiche:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(240, 207, 134, 0.3), inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 18px 2px rgba(219, 169, 79, 0.4);
}

/* ─── boutons : le même arrondi sur tout le site (la moitié de la « pilule », ≈ un quart de la hauteur) ── */
.plaqueOr, .plaqueMate, .plaqueOrLigne { border-radius: 10px; }
.qte button { border-radius: 6px; }
.vignettesFiche button { border-radius: 8px; }

/* ─── la colonne des magnets (/magnets) : la plaque sous le cartel, pas sur une table ─────────── */
.plaqueColonne { top: 66%; }
/* le texte est posé dans la pénombre (colonne des magnets, galerie des monuments) : une ombre douce le détache */
.cartelPenombre :is(.surtitre, .titre, .lieu, .details, .mention) { text-shadow: 0 0.3cqh 2.2cqh rgba(0, 0, 0, 0.75); }
@media (max-aspect-ratio: 1/1) { .plaqueColonne { top: auto; } }

/* ─── menu du téléphone (galerie et colonne des magnets) : le bouton ☰ remplace les liens masqués ─────────── */
.burgerHaut { display: none; color: var(--creme); }
@media (max-width: 640px), (max-aspect-ratio: 1/1) { .burgerHaut { display: grid; } }
.menuMobileHaut {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
  background: #0e0b0a;
}
.menuMobileHaut[hidden] { display: none; }
.menuOuvert .barreHaut { position: relative; z-index: 61; }
.menuMobileHaut nav { display: flex; flex-direction: column; gap: 4px; max-width: 520px; margin: 0 auto; }
.menuMobileHaut nav > a {
  padding: 16px 0; border-bottom: 1px solid rgba(247, 239, 228, 0.1); color: var(--creme); text-decoration: none;
  font-family: "Playfair Display", Georgia, serif; font-size: 22px; font-weight: 600;
}
.menuMobileHaut nav > a[aria-current] { color: var(--or); }
.menuMobileHaut .boutonsMobile { display: flex; gap: 12px; margin-top: 28px; }
.menuMobileHaut .boutonsMobile .pilHaut { flex: 1; justify-content: center; padding: 14px 16px; font-size: 15px; }

/* ─── téléphone : ergonomie (28/09, demandes de l'atelier) ─────────────────────────────────────────────
   plus de barre du bas (on glisse vers la gauche ou la droite pour avancer), titres plus petits, l'essentiel du texte
   seulement : tout tient à l'écran sans défiler (sauf le panier, et son formulaire) */
.indiceGeste { display: none; }
@media (max-aspect-ratio: 1/1) {
  .racine { grid-template-rows: auto minmax(0, 1fr); }
  .barreBas { display: none; }
  .calque {
    max-height: none;
    overflow: visible;
    padding: 5rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    touch-action: none;
  }
  .calque[data-defile] { max-height: 84%; overflow-y: auto; touch-action: pan-y; }
  .sousAccroche { display: none; }
  .motSol { font-size: 2.3rem; margin-bottom: 0.2rem; }
  .motReflet { display: none; }
  .titre, .titrePorte { font-size: 1.6rem; }
  .accroche, .porte .accroche { font-size: 1.05rem; }
  .surtitre { font-size: 0.6rem; margin-bottom: 0.5rem; }
  .lieu, .details { font-size: 0.86rem; }
  .mention { font-size: 0.72rem; }
  .ouverture { gap: 0.6rem; }
  .boutonOr { margin-top: 0.8rem; }
  .plaqueOr, .plaqueMate { margin-top: 0.9rem; }
  .indiceGeste {
    display: block; margin: 0.4rem 0 0; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(248, 239, 226, 0.55);
  }
  .indiceGeste::before { content: "←"; display: inline-block; margin-right: 0.6em; animation: indice 1.6s ease-in-out infinite; }
}
@keyframes indice { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .indiceGeste::before { animation: none; } }

/* téléphone : logo et nom « Sarimbatim » un peu plus petits dans la barre du haut */
@media (max-width: 640px) {
  .barreHaut .marque { gap: 0.5rem; font-size: 1.1rem; }
  .barreHaut .marque img { width: 24px; height: 24px; }
}

/* ─── cartel d'une pièce en vente : le prix, puis « Voir la pièce » · « Acheter » (· « Commander ») sur une ligne ─── */
.prixCartel {
  margin: 1.6cqh 0 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: max(20px, 3.1cqh);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--or-pale);
  text-shadow: 0 0.3cqh 2cqh rgba(0, 0, 0, 0.6);
}
.actionsCartel { display: flex; flex-wrap: wrap; align-items: center; gap: max(8px, 1.1cqh); margin-top: 2.2cqh; }
.actionsCartel .boutonOr { margin-top: 0; }
.boutonContour {
  display: inline-flex; align-items: center; justify-content: center;
  padding: max(10px, 1.55cqh) max(18px, 2.9cqh);
  border-radius: 9px;
  border: 1.5px solid rgba(240, 207, 134, 0.8);
  background: linear-gradient(180deg, rgba(40, 32, 24, 0.95), rgba(14, 11, 10, 0.97));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(240, 207, 134, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(219, 169, 79, 0.18);
  color: var(--or-pale) !important;
  font-size: max(13px, 1.75cqh);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.boutonContour:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(240, 207, 134, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 20px 2px rgba(219, 169, 79, 0.4);
}
.boutonContour[data-pose] { border-color: var(--or-pale); color: #fff4d6 !important; }
.boutonContour:disabled { opacity: 0.5; cursor: default; }
@media (max-aspect-ratio: 1/1) {
  .prixCartel { margin-top: 0.7rem; font-size: 1.35rem; }
  .actionsCartel { margin-top: 0.8rem; gap: 8px; }
  .actionsCartel :is(.boutonOr, .boutonContour) { padding: 10px 16px; font-size: 14px; }
}