/* =========================================================
   Matrice d'Énergies — GALERIE DES DIX ZONES
   Roue 3D cliquable + lecture en plan de verre.
   Fond graphite silver commun, Zodiak / Sofia Sans.
   ========================================================= */

#zones-galerie {
  --zg-verre: rgba(238, 240, 244, .055);
  --zg-verre-fort: rgba(238, 240, 244, .085);
  --zg-filet: rgba(238, 240, 244, .16);
  --zg-texte: #eef0f4;
  --zg-doux: #aeb0b8;
  --zg-teinte: #c8cbd3;
  position: relative;
  display: block;
  /* La roue a besoin de toute la largeur : on neutralise la
     contrainte de 1200 px héritée de `.section`. */
  max-width: none;
  padding-inline: 0;
  padding-block: clamp(3.5rem, 8.5vh, 6.5rem);
  overflow: hidden;
}

.zg {
  width: min(100% - 2.5rem, 1400px);
  margin-inline: auto;
}

.zg__tete {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 5vh, 3.5rem);
  text-align: center;
}

.zg__tete .lede {
  margin-top: 1rem;
  color: var(--zg-doux);
}

/* ---------------------------------------------------------
   La scène : la roue et sa poussière lumineuse
   --------------------------------------------------------- */
.zg__scene {
  position: relative;
  height: clamp(30rem, 62svh, 40rem);
  perspective: 1600px;
  perspective-origin: 50% 46%;
  outline: none;
}

.zg__scene::after {
  /* halo qui prend la couleur de la zone au centre */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70%, 46rem);
  aspect-ratio: 1.7;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    color-mix(in oklab, var(--zg-teinte) 22%, transparent) 0%,
    transparent 68%);
  filter: blur(2px);
  opacity: .5;
  pointer-events: none;
  transition: background .8s ease;
  z-index: 0;
}

.zg__poussiere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .7;
}

.zg__anneau {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  z-index: 2;
}

/* ---------------------------------------------------------
   Les cartes de verre
   --------------------------------------------------------- */
.zg-carte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(23rem, 76vw);
  margin: -14.5rem 0 0 -11.5rem;
  min-height: 29rem;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: .9rem;
  padding: 1.5rem 1.5rem 1.3rem;
  border: 1px solid var(--zg-filet);
  border-radius: 20px;
  background: linear-gradient(160deg,
    rgba(238, 240, 244, .085) 0%,
    rgba(238, 240, 244, .035) 46%,
    rgba(21, 22, 27, .5) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    0 24px 60px rgba(4, 5, 8, .45),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transform-style: preserve-3d;
  transition:
    transform .85s cubic-bezier(.16, 1, .3, 1),
    opacity .6s ease,
    border-color .5s ease,
    box-shadow .6s ease;
  cursor: pointer;
}

.zg-carte::before {
  /* liseré de la zone */
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg,
    transparent, var(--zg-accent), var(--zg-accent2), transparent);
  opacity: .75;
}

.zg-carte.is-active {
  border-color: color-mix(in oklab, var(--zg-accent) 42%, var(--zg-filet));
  box-shadow:
    0 34px 80px rgba(4, 5, 8, .55),
    0 0 0 1px color-mix(in oklab, var(--zg-accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  cursor: default;
}

.zg-carte__tete {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .85rem;
}

.zg-carte__num {
  font-family: "Zodiak", "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1;
  color: var(--zg-accent);
  opacity: .9;
}

.zg-carte__titre {
  margin: 0;
  font-family: "Zodiak", "Times New Roman", serif;
  font-size: clamp(1.35rem, 1.7vw, 1.62rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--zg-texte);
}

.zg-carte__sous {
  margin: .3rem 0 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zg-doux);
}

/* Le visuel de la matrice, teinté par la zone */
.zg-carte__visuel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(12, 13, 17, .55);
  min-height: 8.5rem;
}

.zg-carte__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: .5;
  filter: grayscale(.35) contrast(1.05);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .6s ease;
}

.zg-carte.is-active .zg-carte__visuel img {
  opacity: .82;
  transform: scale(1.04);
}

.zg-carte__voile {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%,
      color-mix(in oklab, var(--zg-accent) 26%, transparent) 0%,
      transparent 62%),
    linear-gradient(180deg, transparent 42%, rgba(21, 22, 27, .82) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.zg-carte__court {
  margin: 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(238, 240, 244, .82);
}

.zg-carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(238, 240, 244, .1);
}

.zg-carte__prix {
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zg-doux);
}

.zg-carte__plus {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .95rem;
  border: 1px solid var(--zg-filet);
  border-radius: 999px;
  background: rgba(238, 240, 244, .05);
  color: var(--zg-texte);
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

.zg-carte__plus b {
  font-family: "Zodiak", serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1;
  color: var(--zg-accent);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.zg-carte__plus:hover,
.zg-carte__plus:focus-visible {
  background: color-mix(in oklab, var(--zg-accent) 16%, rgba(238, 240, 244, .05));
  border-color: color-mix(in oklab, var(--zg-accent) 45%, var(--zg-filet));
  transform: translateY(-1px);
}

.zg-carte__plus:hover b { transform: rotate(90deg); }

/* ---------------------------------------------------------
   Flèches et repères
   --------------------------------------------------------- */
.zg__fleche {
  position: absolute;
  top: 50%;
  z-index: 30;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--zg-filet);
  border-radius: 50%;
  background: rgba(21, 22, 27, .55);
  color: var(--zg-texte);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.zg__fleche--prec { left: clamp(.25rem, 2vw, 2rem); }
.zg__fleche--suiv { right: clamp(.25rem, 2vw, 2rem); }

.zg__fleche:hover,
.zg__fleche:focus-visible {
  background: rgba(238, 240, 244, .12);
  border-color: rgba(238, 240, 244, .4);
  transform: scale(1.06);
}

.zg__reperes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.zg__reperes button {
  padding: .42rem .85rem;
  border: 1px solid rgba(238, 240, 244, .12);
  border-radius: 999px;
  background: transparent;
  color: var(--zg-doux);
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .74rem;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.zg__reperes button:hover { color: var(--zg-texte); }

.zg__reperes button.is-active {
  color: #15161b;
  background: var(--zg-accent);
  border-color: var(--zg-accent);
}

/* ---------------------------------------------------------
   Lecture longue — le plan de verre
   --------------------------------------------------------- */
.zg-lecture {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem);
}

/* IMPÉRATIF : `display: grid` ci-dessus écrase la règle navigateur
   `[hidden] { display: none }`. Sans cette ligne, le panneau reste
   affiché en plein écran, invisible mais présent — et il intercepte
   TOUS les clics de la page. */
.zg-lecture[hidden] {
  display: none !important;
}

/* Ceinture et bretelles : tant que la lecture n'est pas ouverte,
   rien dans cette couche ne peut capter le pointeur. */
.zg-lecture:not(.is-open) {
  pointer-events: none;
}

.zg-lecture.is-open {
  pointer-events: auto;
}

.zg-lecture__voile {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 14, .72);
  opacity: 0;
  transition: opacity .42s ease;
}

.zg-lecture.is-open .zg-lecture__voile { opacity: 1; }

.zg-lecture__plan {
  position: relative;
  width: min(100%, 58rem);
  max-height: min(86svh, 54rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border: 1px solid rgba(238, 240, 244, .18);
  border-radius: 22px;
  background: linear-gradient(155deg,
    rgba(238, 240, 244, .1) 0%,
    rgba(238, 240, 244, .04) 40%,
    rgba(21, 22, 27, .82) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  backdrop-filter: blur(26px) saturate(1.15);
  box-shadow:
    0 40px 110px rgba(4, 5, 8, .6),
    inset 0 1px 0 rgba(255, 255, 255, .09);
  opacity: 0;
  transform: translate3d(0, 3.5vh, -120px) scale(.95);
  transition:
    opacity .42s ease,
    transform .62s cubic-bezier(.16, 1, .3, 1);
}

.zg-lecture.is-open .zg-lecture__plan {
  opacity: 1;
  transform: none;
}

.zg-lecture__plan::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, var(--zg-accent, #c8cbd3), transparent);
}

.zg-lecture__fermer {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 240, 244, .18);
  border-radius: 50%;
  background: rgba(21, 22, 27, .5);
  color: var(--zg-texte);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.zg-lecture__fermer:hover { background: rgba(238, 240, 244, .14); transform: rotate(90deg); }

.zg-lecture__kicker {
  margin: 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--zg-accent, #c8cbd3);
}

.zg-lecture__titre {
  margin: .5rem 0 0;
  font-family: "Zodiak", "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--zg-texte);
}

.zg-lecture__questions {
  margin: 1.4rem 0 0;
  padding: 0 0 0 1.1rem;
  list-style: none;
  border-left: 2px solid color-mix(in oklab, var(--zg-accent, #c8cbd3) 50%, transparent);
}

.zg-lecture__questions li {
  margin: .35rem 0;
  font-family: "Zodiak", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.4;
  color: rgba(238, 240, 244, .9);
}

.zg-lecture__intro {
  margin: 1.5rem 0 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: clamp(1.06rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  color: rgba(238, 240, 244, .92);
}

.zg-lecture__bloc { margin-top: 1.8rem; }

.zg-lecture__bloc h4 {
  margin: 0 0 .5rem;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--zg-doux);
}

.zg-lecture__bloc p {
  margin: 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  line-height: 1.72;
  color: rgba(238, 240, 244, .8);
}

.zg-lecture__polarite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
}

.zg-lecture__pole {
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(238, 240, 244, .12);
  border-radius: 14px;
  background: rgba(238, 240, 244, .04);
}

.zg-lecture__pole h4 {
  margin: 0 0 .6rem;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.zg-lecture__pole--plus h4 { color: #9fe65c; }
.zg-lecture__pole--moins h4 { color: #ff8f6d; }

.zg-lecture__pole ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zg-lecture__pole li {
  position: relative;
  padding-left: 1rem;
  margin: .4rem 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(238, 240, 244, .8);
}

.zg-lecture__pole li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .38rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.zg-lecture__chute {
  margin: 2rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(238, 240, 244, .12);
  font-family: "Zodiak", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.42;
  color: var(--zg-texte);
}

.zg-lecture__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.8rem;
}

.zg-lecture__prix {
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zg-doux);
}

body.zg-lecture-ouverte { overflow: hidden; }

/* ---------------------------------------------------------
   TABLETTE — 721 à 1080 px : la roue s'aplatit en bande
   --------------------------------------------------------- */
@media (min-width: 721px) and (max-width: 1080px) {
  .zg__scene { height: clamp(28rem, 56svh, 34rem); }
  .zg-carte {
    width: min(21rem, 60vw);
    margin-left: -10.5rem;
    min-height: 26rem;
  }
  .zg-carte__titre { font-size: 1.4rem; }
  .zg-lecture__polarite { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------
   TÉLÉPHONE — ≤ 720 px : bande horizontale à faire glisser
   Pas de perspective 3D : elle coûte cher et se lit mal.
   --------------------------------------------------------- */
@media (max-width: 720px) {
  #zones-galerie { padding-block: clamp(2.5rem, 6vh, 4rem); }

  .zg { width: 100%; }
  .zg__tete { padding-inline: 1.15rem; }

  .zg__scene {
    height: auto;
    perspective: none;
  }

  .zg__anneau[data-mode="bande"] {
    position: static;
    display: flex;
    gap: 1rem;
    padding: .5rem 1.15rem 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .zg__anneau[data-mode="bande"]::-webkit-scrollbar { display: none; }

  .zg__anneau[data-mode="bande"] .zg-carte {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    flex: 0 0 min(84vw, 21rem);
    min-height: 25rem;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    scroll-snap-align: center;
  }

  .zg__fleche { display: none; }
  .zg__poussiere { display: none; }
  .zg__scene::after { display: none; }

  .zg__reperes {
    padding-inline: 1.15rem;
    gap: .4rem;
  }

  .zg__reperes button { font-size: .68rem; padding: .35rem .7rem; }

  .zg-lecture { padding: 0; }

  .zg-lecture__plan {
    width: 100%;
    max-height: 100svh;
    height: 100svh;
    border-radius: 0;
    border: 0;
    padding: 4.5rem 1.25rem 2.5rem;
  }

  .zg-lecture__polarite { grid-template-columns: 1fr; }
  .zg-lecture__actions { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------
   Mouvement réduit
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .zg-carte,
  .zg-lecture__plan,
  .zg-lecture__voile,
  .zg-carte__visuel img {
    transition-duration: .01ms !important;
  }
}

.zg__reperes button,
.zg__reperes button.is-active {
  font-weight: 500 !important;
}

/* =========================================================
   28. LECTURE LONGUE — UN SEUL DÉFILEMENT, CELUI DE LA PAGE
   La couche plein écran porte le défilement. Le contenu n'est plus
   enfermé dans un panneau à hauteur limitée ni dans une seconde barre.
   ========================================================= */
.zg-lecture {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding: 0;
  background: #17181f;
}

.zg-lecture__voile {
  position: fixed;
  background: #17181f;
}

.zg-lecture__plan,
.zg-lecture.is-open .zg-lecture__plan {
  width: min(100%, 88rem);
  max-height: none !important;
  min-height: 100svh;
  height: auto !important;
  margin: 0 auto;
  padding: clamp(5.5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
  overflow: visible !important;
  border: 0;
  border-radius: 0;
  background: #17181f;
  box-shadow: none;
}

.zg-lecture__plan::before {
  display: none;
}

.zg-lecture__fermer {
  position: fixed;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 5;
}

@media (max-width: 720px) {
  .zg-lecture {
    scrollbar-gutter: auto;
  }

  .zg-lecture__plan,
  .zg-lecture.is-open .zg-lecture__plan {
    min-height: 100svh;
    height: auto !important;
    max-height: none !important;
    padding: 5.25rem 1.2rem 4rem;
    overflow: visible !important;
  }
}

/* =========================================================
   25. CONTOUR GRAPH — PARITÉ ORDINATEUR / TABLETTE / TÉLÉPHONE
   Le contour conique ressemblait à une carte. On conserve uniquement
   les éclats du canvas, identiques à l'expérience ordinateur.
   ========================================================= */
.zg-carte::after,
.zg-carte.is-active::after {
  display: none !important;
  animation: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  .zg__poussiere {
    position: absolute;
    inset: 0;
    z-index: 3 !important;
    display: block !important;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .82;
  }

  .zg__anneau[data-mode="bande"] .zg-carte.is-active {
    z-index: 6 !important;
  }
}

/* =========================================================
   PERSONNALISATION — la vraie matrice du visiteur
   Dès qu'une date est calculée, chaque fiche montre la carte
   réelle, recadrée sur les nœuds de sa zone.
   ========================================================= */
.zg-carte { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }

.zg-carte__visuel.is-personnalise {
  /* Fond ivoire de la matrice. `isolation` confine le mélange du
     voile teinté à CE fond, au lieu de le laisser se multiplier
     avec le graphite de la carte — ce qui noircissait la carte. */
  background: #f4f1e6;
  isolation: isolate;
}

.zg-carte__visuel.is-personnalise svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.zg-carte__visuel.is-personnalise .zg-carte__voile {
  background:
    radial-gradient(ellipse at 50% 45%,
      color-mix(in oklab, var(--zg-accent) 20%, transparent) 0%,
      transparent 66%);
  mix-blend-mode: multiply;
  opacity: .55;
}

.zg-carte__valeurs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
}

/* Une vraie pastille ronde : le nombre parfaitement centré, la lettre
   de clé dessous. `align-items: baseline` poussait le chiffre trop haut. */
.zg-carte__valeurs .mx-value,
.zg-lecture__valeurs .mx-value {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 50%;
  background: var(--node, rgba(238, 240, 244, .12));
  color: var(--node-ink, #eef0f4);
  font-family: "Sofia Sans", system-ui, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.zg-carte__valeurs .mx-value b,
.zg-lecture__valeurs .mx-value b {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
}

.zg-carte__valeurs .mx-value i,
.zg-lecture__valeurs .mx-value i {
  font-style: normal;
  font-size: .54rem;
  font-weight: 500;
  line-height: 1;
  margin-top: .12rem;
  opacity: .7;
}

.zg-lecture__valeurs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.1rem 0 0;
}

/* =========================================================
   FICHE COMPLÈTE — « Découvrir toutes les zones »
   ========================================================= */
.zg-sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.6rem 0 .5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(238, 240, 244, .12);
}

.zg-sommaire a {
  padding: .34rem .7rem;
  border: 1px solid rgba(238, 240, 244, .14);
  border-radius: 999px;
  color: var(--zg-doux);
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.zg-sommaire a:hover,
.zg-sommaire a:focus-visible {
  color: #15161b;
  background: var(--zg-accent);
  border-color: var(--zg-accent);
}

.zg-fiche {
  padding: 2rem 0 .5rem;
  border-bottom: 1px solid rgba(238, 240, 244, .1);
  scroll-margin-top: 1rem;
}

.zg-fiche:last-of-type { border-bottom: 0; }

.zg-fiche__tete {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .9rem;
  margin-bottom: 1rem;
}

.zg-fiche__num {
  font-family: "Zodiak", "Times New Roman", serif;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
  color: var(--zg-accent);
}

.zg-fiche__titre {
  margin: 0;
  font-family: "Zodiak", "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--zg-texte);
}

.zg-fiche__sous {
  margin: .28rem 0 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zg-doux);
}

.zg-fiche__intro {
  margin: 0 0 1rem;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.62;
  color: rgba(238, 240, 244, .9);
}

.zg-fiche h5 {
  margin: 1.2rem 0 .4rem;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--zg-doux);
}

.zg-fiche p {
  margin: 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: clamp(.95rem, 1.1vw, 1.04rem);
  line-height: 1.7;
  color: rgba(238, 240, 244, .78);
}

.zg-fiche .zg-lecture__polarite { margin-top: 1.4rem; }

.zg-fiche__chute {
  margin-top: 1.2rem !important;
  font-family: "Zodiak", "Times New Roman", serif !important;
  font-style: italic;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem) !important;
  color: var(--zg-texte) !important;
}

@media (max-width: 720px) {
  .zg-sommaire { gap: .35rem; }
  .zg-sommaire a { font-size: .66rem; padding: .3rem .55rem; }
  .zg-fiche { padding-top: 1.6rem; }
}
/* =========================================================
   10. CARTES PLUS RAPIDES ET SANS CHEVAUCHEMENT
   ---------------------------------------------------------
   Deux reproches de Jason, tous deux justes :
   · la rotation était trop lente (0,85 s) ;
   · les cartes voisines se superposaient à la carte centrale,
     si bien qu'on voyait deux matrices l'une sur l'autre et
     qu'on ne comprenait plus rien.
   ========================================================= */

/* Rotation franche. */
.zg-carte {
  transition:
    transform .42s cubic-bezier(.22, 1, .32, 1),
    opacity .28s ease,
    border-color .3s ease,
    box-shadow .3s ease !important;
}

/* Seule la carte centrale est pleinement lisible. Les voisines
   reculent nettement et s'effacent : elles indiquent qu'il y a
   une suite, elles ne se lisent pas. */
.zg-carte:not(.is-active) {
  filter: saturate(.55) brightness(.62);
}

.zg-carte:not(.is-active) .zg-carte__court,
.zg-carte:not(.is-active) .zg-carte__valeurs,
.zg-carte:not(.is-active) .zg-carte__pied {
  opacity: 0;
  transition: opacity .2s ease;
}

.zg-carte.is-active .zg-carte__court,
.zg-carte.is-active .zg-carte__valeurs,
.zg-carte.is-active .zg-carte__pied {
  opacity: 1;
  transition: opacity .35s ease .1s;
}

/* Le visuel de la carte centrale passe au-dessus de tout. */
.zg-carte.is-active {
  z-index: 200 !important;
}
/* =========================================================
   11. ÉTIQUETTES DES ZONES — RETOUR AU SILVER
   ---------------------------------------------------------
   Les pastilles colorées de la barre de noms juraient avec la
   ligne graphite/argent du site. Elles redeviennent sobres :
   c'est la carte au centre qui porte la couleur de la zone,
   pas le sélecteur.
   ========================================================= */
.zg__reperes button,
.zg__reperes button:hover,
.zg__reperes button.is-active {
  background: transparent !important;
  border-color: rgba(238, 240, 244, .14) !important;
  color: var(--zg-doux) !important;
  font-weight: 400 !important;
}

.zg__reperes button:hover,
.zg__reperes button:focus-visible {
  color: var(--zg-texte) !important;
  border-color: rgba(238, 240, 244, .32) !important;
}

.zg__reperes button.is-active {
  color: #15161b !important;
  background: rgba(238, 240, 244, .92) !important;
  border-color: rgba(238, 240, 244, .92) !important;
  font-weight: 500 !important;
}

/* =========================================================
   12. SANS LE RÉCIT 3D
   ---------------------------------------------------------
   La section du parcours est retirée du flux : plus aucun
   ancrage, plus aucune scène rechargée, la page défile d'une
   traite du résultat jusqu'aux tarifs.
   ========================================================= */
body.mx-sans-recit .mx-zone-story {
  display: none !important;
}
/* =========================================================
   13. LE DOUBLE FOND DES VIGNETTES
   ---------------------------------------------------------
   `.zg-carte__visuel img { display: block }` écrasait
   l'attribut `hidden` posé en JS : l'image PNG de secours
   restait affichée SOUS la matrice calculée. D'où deux fonds
   superposés et deux séries de chiffres décalées, qui
   donnaient l'impression que les nombres étaient « tous en
   haut ». Même piège que le panneau de lecture.
   ========================================================= */
.zg-carte__visuel img[hidden] {
  display: none !important;
}

/* La matrice calculée occupe seule le cadre, sur son ivoire. */
.zg-carte__visuel.is-personnalise {
  background: #f6f3e9 !important;
}

.zg-carte__visuel.is-personnalise svg {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
}

/* Voile très léger : il teinte, il ne masque pas. */
.zg-carte__visuel.is-personnalise .zg-carte__voile {
  opacity: .3 !important;
}

/* =========================================================
   14. PANNEAU DE LECTURE — plus de barre horizontale
   ========================================================= */
.zg-lecture__plan {
  overflow-x: hidden !important;
}

.zg-lecture__plan * {
  max-width: 100%;
  overflow-wrap: break-word;
}

.zg-lecture__polarite {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* =========================================================
   15. LES TROIS POLICES PARASITES
   ---------------------------------------------------------
   · `.ptier__discover` n'avait AUCUNE `font-family` : un
     <button> n'hérite pas de la police, le navigateur
     retombait donc sur Arial.
   · `.zrow__desc` / `.zrow__long` demandaient IBM Plex Mono,
     jamais chargée → repli Courier New.
   Le site ne connaît que deux familles : Zodiak et Sofia Sans.
   ========================================================= */
.ptier__discover,
.ptier__discover span,
.ptier__btn,
button,
input,
select,
textarea {
  font-family: "Sofia Sans", system-ui, sans-serif;
}

.zrow__desc,
.zrow__long {
  font-family: "Sofia Sans", system-ui, sans-serif !important;
}

.ptier__name,
.ptier__name--global,
.zrow__title {
  font-family: "Zodiak", "Times New Roman", serif;
}
/* =========================================================
   16. FONDU DANS LE DÉCOR — plus de couleur derrière les vignettes
   ---------------------------------------------------------
   Jason veut des cartes fondues dans le graphite/argent : la
   couleur ne doit vivre que dans les bulles de la matrice,
   pas en halo derrière la carte.
   ========================================================= */
.zg-carte__voile,
.zg-carte__visuel.is-personnalise .zg-carte__voile {
  background:
    linear-gradient(180deg, transparent 55%, rgba(21, 22, 27, .55) 100%) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Le liseré coloré du haut redevient argent discret. */
.zg-carte::before {
  background: linear-gradient(90deg,
    transparent, rgba(238, 240, 244, .35), transparent) !important;
}

/* La carte centrale : cadre argent, pas de halo coloré. */
.zg-carte.is-active {
  border-color: rgba(238, 240, 244, .34) !important;
  box-shadow:
    0 34px 80px rgba(4, 5, 8, .55),
    inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

/* Numéro et bouton : argent, plus la couleur de zone. */
.zg-carte__num,
.zg-carte__plus b {
  color: rgba(238, 240, 244, .82) !important;
}

.zg-carte__plus:hover,
.zg-carte__plus:focus-visible {
  background: rgba(238, 240, 244, .1) !important;
  border-color: rgba(238, 240, 244, .4) !important;
}

/* Le halo de la scène et le sous-titre : neutres. */
.zg__scene::after { display: none !important; }
.zg-carte__sous { color: var(--zg-doux) !important; }

/* =========================================================
   17. BANDEAU DE MATRICE EN HAUT DE LA CARTE « DÉCOUVRIR + »
   ---------------------------------------------------------
   La matrice recadrée sur la zone apparaît en filigrane sur
   une bande, tout en haut du plan de lecture, derrière le
   titre. Responsive : la bande se réduit sur petit écran.
   ========================================================= */
.zg-lecture__plan {
  position: relative;
  overflow-x: hidden !important;
}

.zg-lecture__bandeau {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(7rem, 16vh, 11rem);
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .6s ease .15s, transform .7s cubic-bezier(.16, 1, .3, 1) .15s;
  pointer-events: none;
  z-index: 0;
}

.zg-lecture.is-open .zg-lecture__bandeau.is-personnalise {
  opacity: .5;
  transform: none;
}

.zg-lecture__bandeau svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 260%;
  transform: translate(-50%, -50%);
}

.zg-lecture__bandeau::after {
  /* fondu vers le graphite : la bande se dissout dans la carte */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(21, 22, 27, .35) 0%,
    rgba(21, 22, 27, .78) 62%,
    rgba(21, 22, 27, 1) 100%);
}

/* Le contenu passe au-dessus de la bande. */
.zg-lecture__kicker,
.zg-lecture__titre,
.zg-lecture__valeurs {
  position: relative;
  z-index: 1;
}

/* =========================================================
   18. POLICE NORMALE ET PLUS VISIBLE — plus d'italique
   ---------------------------------------------------------
   Les questions et la phrase de chute étaient en Zodiak
   italique. Jason les veut droites et plus lisibles.
   ========================================================= */
.zg-lecture__questions li,
.zg-lecture__chute,
.zg-fiche__chute {
  font-family: "Sofia Sans", system-ui, sans-serif !important;
  font-style: normal !important;
  color: #eef0f4 !important;
}

.zg-lecture__questions li {
  font-weight: 500 !important;
}

.zg-lecture__chute,
.zg-fiche__chute {
  font-weight: 600 !important;
}

/* =========================================================
   19. VISITE GUIDÉE RETIRÉE
   ---------------------------------------------------------
   Le récit 3D est désactivé : le bouton « Visite guidée »
   pointait vers un parcours qui n'existe plus.
   ========================================================= */
body.mx-sans-recit #mx-tour,
body.mx-sans-recit .mx-action--guide {
  display: none !important;
}

/* =========================================================
   20. VIGNETTES FONDUES DANS LE DÉCOR
   ---------------------------------------------------------
   Jason ne veut plus de « carte » rigide : le texte doit
   flotter dans le vide du fond, et le tour de la carte active
   doit être une lueur argentée animée, fondue, pas un cadre.
   ========================================================= */

/* On retire le panneau de verre : fond qui se dissout vers les
   bords, aucun cadre dur, aucun flou de panneau. */
.zg-carte,
.zg-carte.is-active {
  background:
    radial-gradient(120% 100% at 50% 30%,
      rgba(21, 22, 27, .72) 0%,
      rgba(21, 22, 27, .5) 46%,
      rgba(21, 22, 27, 0) 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Le liseré coloré du haut disparaît. */
.zg-carte::before { display: none !important; }

/* La carte active reçoit un contour de lueur argentée animée,
   dessiné par un dégradé conique qui tourne lentement — fondu,
   jamais un trait net. */
.zg-carte::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: conic-gradient(from var(--zg-tour, 0deg),
    transparent 0deg,
    rgba(238, 240, 244, .05) 40deg,
    rgba(238, 240, 244, .55) 90deg,
    rgba(238, 240, 244, .05) 140deg,
    transparent 200deg,
    rgba(238, 240, 244, .35) 300deg,
    transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

.zg-carte.is-active::after {
  opacity: 1;
  animation: zg-tour 6s linear infinite;
}

@property --zg-tour {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes zg-tour {
  to { --zg-tour: 360deg; }
}

/* Repli pour les navigateurs sans @property : une lueur douce
   fixe au lieu du dégradé qui tourne. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .zg-carte.is-active::after {
    background: none;
    box-shadow: 0 0 0 1px rgba(238, 240, 244, .3);
    animation: none;
  }
}

/* Le visuel de la matrice : plus de cadre, il se fond aussi.
   Un halo argenté très doux le cerne au lieu d'un rectangle. */
.zg-carte__visuel {
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow:
    0 0 0 1px rgba(238, 240, 244, .06),
    0 18px 50px rgba(4, 5, 8, .4) !important;
}

.zg-carte__visuel.is-personnalise {
  background: #f6f3e9 !important;
  -webkit-mask: radial-gradient(120% 120% at 50% 46%, #000 62%, transparent 100%);
  mask: radial-gradient(120% 120% at 50% 46%, #000 62%, transparent 100%);
}

/* Les écritures flottent : plus de filet sous le pied. */
.zg-carte__pied {
  border-top: 1px solid rgba(238, 240, 244, .08) !important;
}

/* Les cartes voisines : à peine esquissées, fondues dans le noir. */
.zg-carte:not(.is-active) {
  filter: saturate(.4) brightness(.5) blur(.4px);
}

/* =========================================================
   21. LE CONTOUR EST FAIT DE PARTICULES
   ---------------------------------------------------------
   Ce sont désormais les éclats argentés animés (canvas) qui
   cernent la carte active : on éteint le liseré conique.
   ========================================================= */
.zg-carte::after,
.zg-carte.is-active::after {
  display: none !important;
}

/* Le canvas des éclats doit passer AU-DESSUS des cartes voisines
   mais derrière la carte active. */
.zg__poussiere { z-index: 3 !important; }
.zg-carte.is-active { z-index: 6 !important; }

/* =========================================================
   22. FICHE « LES DIX ZONES » — mieux aérée + apparition au scroll
   ---------------------------------------------------------
   Les sections étaient trop collées. On les sépare franchement,
   et chacune se révèle au défilement, comme les offres tarifaires.
   ========================================================= */
.zg-fiche {
  padding: clamp(2.4rem, 5vh, 4rem) 0 clamp(1.6rem, 3vh, 2.4rem) !important;
  border-top: 1px solid rgba(238, 240, 244, .1);
  border-bottom: 0 !important;
}

.zg-fiche:first-of-type { border-top: 0; }

.zg-fiche h5 {
  margin-top: 1.6rem !important;
}

.zg-fiche p { margin-bottom: .2rem; }

.zg-fiche .zg-lecture__polarite { margin-top: 1.8rem !important; }

/* Apparition au scroll — même esprit que les offres tarifaires :
   chaque fiche monte depuis la profondeur et se révèle. */
@media (prefers-reduced-motion: no-preference) {
  .zg-lecture__plan .zg-fiche {
    opacity: 0;
    transform: translateY(40px) scale(.98);
    filter: blur(4px);
    transition:
      opacity .7s cubic-bezier(.16, 1, .3, 1),
      transform .8s cubic-bezier(.16, 1, .3, 1),
      filter .7s ease;
  }
  .zg-lecture__plan .zg-fiche.is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* =========================================================
   23. INTERFACES RESPONSIVE DE LA GALERIE
   Ordinateur : roue 3D ample.
   Tablette : roue 3D compacte et commandes tactiles.
   Téléphone : bande native, cartes courtes et navigation visible.
   ========================================================= */
@media (min-width: 721px) and (max-width: 1080px) {
  .zg__scene {
    height: clamp(29rem, 62svh, 35rem);
    perspective: 1350px;
  }

  .zg__fleche {
    width: 3rem;
    height: 3rem;
  }

  .zg__reperes button {
    min-height: 2.75rem;
    padding-inline: .9rem;
  }

  .zg__poussiere {
    display: block !important;
    opacity: .82;
    pointer-events: none;
  }
}

@media (max-width: 720px) {
  #zones-galerie {
    padding-block: clamp(2.5rem, 7svh, 3.75rem);
  }

  .zg__tete {
    margin-bottom: 1.25rem;
  }

  .zg__tete .section__title {
    font-size: clamp(2rem, 10vw, 2.8rem);
    line-height: .98;
  }

  .zg__tete .lede {
    max-width: 30rem;
    margin-inline: auto;
    font-size: .94rem;
    line-height: 1.5;
  }

  .zg__scene {
    position: relative;
    height: auto;
    min-height: 0;
    perspective: none;
  }

  .zg__anneau[data-mode="bande"] {
    position: relative;
    inset: auto;
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .4rem calc((100vw - min(74vw, 16.5rem)) / 2) 1rem;
    scroll-padding-inline: calc((100vw - min(74vw, 16.5rem)) / 2);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    touch-action: pan-y pinch-zoom;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
  }

  .zg__anneau[data-mode="bande"].is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .zg__anneau[data-mode="bande"]::-webkit-scrollbar {
    display: none;
  }

  .zg__anneau[data-mode="bande"] .zg-carte {
    position: relative;
    inset: auto;
    flex: 0 0 min(74vw, 16.5rem);
    width: min(74vw, 16.5rem);
    min-height: 20.5rem;
    margin: 0;
    padding: 1rem;
    gap: .65rem;
    border-radius: 16px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__tete {
    gap: .65rem;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__num {
    font-size: 1.2rem;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__titre {
    font-size: 1.16rem;
    line-height: 1.08;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__sous {
    margin-top: .2rem;
    font-size: .63rem;
    line-height: 1.35;
    letter-spacing: .12em;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__visuel {
    min-height: 6rem;
    border-radius: 12px !important;
  }

  .zg__anneau[data-mode="bande"] img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__court {
    font-size: .86rem;
    line-height: 1.42;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__pied {
    gap: .5rem;
    padding-top: .55rem;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__prix {
    font-size: .68rem;
    letter-spacing: .1em;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__plus {
    min-height: 2.75rem;
    padding: .55rem .8rem;
    gap: .4rem;
    font-size: .68rem;
    letter-spacing: .09em;
  }

  .zg__fleche {
    top: 50%;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -1.375rem;
    border-color: rgba(238, 240, 244, .32);
    background: rgba(21, 22, 27, .92);
    box-shadow: 0 10px 28px rgba(4, 5, 8, .48);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .zg__fleche--prec { left: .35rem; }
  .zg__fleche--suiv { right: .35rem; }

  .zg__poussiere,
  .zg__scene::after {
    display: none;
  }

  .zg__reperes {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: .45rem;
    margin-top: .4rem;
    padding: .35rem 1rem .75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .zg__reperes::-webkit-scrollbar {
    display: none;
  }

  .zg__reperes li {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .zg__reperes button {
    min-height: 2.75rem;
    padding: .55rem .8rem;
    white-space: nowrap;
    font-size: .67rem;
  }

  .zg-carte:not(.is-active) .zg-carte__court,
  .zg-carte:not(.is-active) .zg-carte__valeurs,
  .zg-carte:not(.is-active) .zg-carte__pied {
    opacity: .42;
  }
}

@media (max-width: 360px) {
  .zg__anneau[data-mode="bande"] {
    padding-inline: calc((100vw - 76vw) / 2);
    scroll-padding-inline: calc((100vw - 76vw) / 2);
  }

  .zg__anneau[data-mode="bande"] .zg-carte {
    flex-basis: 76vw;
    width: 76vw;
  }
}

/* =========================================================
   24. MATRICES FONDUES + CONTOUR VIVANT RESTAURÉ
   Les matrices calculées ne doivent jamais ressembler à des captures
   d'écran posées dans la carte. Le contour reste léger et animé.
   ========================================================= */
.zg-carte::after,
.zg-carte.is-active::after {
  display: block !important;
}

.zg-carte {
  will-change: transform, opacity;
}

.zg-carte__visuel,
.zg-carte__visuel.is-personnalise {
  overflow: hidden;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.zg-carte__visuel.is-personnalise {
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(246, 243, 233, .96) 0%,
      rgba(246, 243, 233, .8) 40%,
      rgba(246, 243, 233, .28) 62%,
      transparent 82%) !important;
  -webkit-mask: none;
  mask: none;
}

.zg-carte__visuel.is-personnalise svg {
  filter: drop-shadow(0 10px 18px rgba(4, 5, 8, .18));
  -webkit-mask-image: radial-gradient(ellipse 90% 88% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 88% at 50% 50%, #000 58%, transparent 100%);
}

.zg-carte.is-active::after {
  filter: drop-shadow(0 0 8px rgba(238, 240, 244, .28));
}

.zg-carte__visuel:not(.is-personnalise) {
  -webkit-mask: radial-gradient(ellipse 82% 76% at 50% 50%, #000 52%, transparent 100%);
  mask: radial-gradient(ellipse 82% 76% at 50% 50%, #000 52%, transparent 100%);
}

.zg-carte__visuel:not(.is-personnalise) img {
  object-position: 50% 51%;
  transform: scale(1.32);
  opacity: .34;
  filter: grayscale(.35) invert(1) contrast(1.18);
  mix-blend-mode: screen;
}

.zg-carte.is-active .zg-carte__visuel:not(.is-personnalise) img {
  transform: scale(1.38);
  opacity: .54;
}

@media (min-width: 721px) and (max-width: 1080px) {
  .zg__scene {
    touch-action: pan-y pinch-zoom;
  }
}

@media (max-width: 720px) {
  .zg-carte::after {
    inset: -2px;
    border-radius: 18px;
  }

  .zg-carte.is-active::after {
    animation-duration: 4.8s;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__visuel.is-personnalise {
    background:
      radial-gradient(ellipse at 50% 48%,
        rgba(246, 243, 233, .94) 0%,
        rgba(246, 243, 233, .72) 40%,
        rgba(246, 243, 233, .2) 64%,
        transparent 84%) !important;
  }
}

/* Priorité finale : jamais de cadre CSS, uniquement le graph de particules. */
.zg-carte::after,
.zg-carte.is-active::after {
  display: none !important;
  animation: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  .zg__poussiere {
    display: block !important;
  }
}

/* =========================================================
   26. FIDÉLITÉ ABSOLUE DES MATRICES
   Aucun filtre, aucune inversion et aucun voile coloré ne doivent
   modifier les couleurs calculées ou faire disparaître le graph.
   ========================================================= */
.zg-carte__voile,
.zg-carte__visuel.is-personnalise .zg-carte__voile {
  display: none !important;
}

.zg-carte__visuel:not(.is-personnalise) {
  background: transparent !important;
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 55%, rgba(0, 0, 0, .92) 70%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 55%, rgba(0, 0, 0, .92) 70%, transparent 100%) !important;
}

.zg-carte__visuel:not(.is-personnalise) img,
.zg-carte.is-active .zg-carte__visuel:not(.is-personnalise) img {
  opacity: .8 !important;
  filter: grayscale(1) contrast(1.08) brightness(.76) !important;
  mix-blend-mode: normal !important;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.02);
  transition: opacity .7s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .7s ease;
}

.zg-carte.is-active .zg-carte__visuel:not(.is-personnalise) img {
  opacity: .94 !important;
  filter: grayscale(1) contrast(1.12) brightness(.84) !important;
  transform: scale(1.055);
}

.zg-carte__visuel:not(.is-personnalise)::before {
  display: none !important;
}

.zg-carte[data-zone="caractere"] .zg-carte__visuel img { object-position: 50% 48%; }
.zg-carte[data-zone="portrait"] .zg-carte__visuel img { object-position: 50% 42%; }
.zg-carte[data-zone="talents"] .zg-carte__visuel img { object-position: 50% 60%; }
.zg-carte[data-zone="realisation"] .zg-carte__visuel img { object-position: 50% 43%; }
.zg-carte[data-zone="karma-financier"] .zg-carte__visuel img { object-position: 50% 52%; }
.zg-carte[data-zone="relations"] .zg-carte__visuel img { object-position: 50% 55%; }
.zg-carte[data-zone="parent-enfant"] .zg-carte__visuel img { object-position: 50% 50%; }
.zg-carte[data-zone="programme-karmique"] .zg-carte__visuel img { object-position: 50% 54%; }
.zg-carte[data-zone="socialisation"] .zg-carte__visuel img { object-position: 50% 70%; }
.zg-carte[data-zone="missions"] .zg-carte__visuel img { object-position: 50% 76%; }

@media (max-width: 720px) {
  .zg-carte__visuel:not(.is-personnalise) {
    -webkit-mask-image: radial-gradient(ellipse 96% 88% at 50% 50%, #000 57%, rgba(0, 0, 0, .9) 74%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 96% 88% at 50% 50%, #000 57%, rgba(0, 0, 0, .9) 74%, transparent 100%) !important;
  }
}

.zg-carte__visuel.is-personnalise svg {
  opacity: 1 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#zones-galerie {
  scroll-margin-top: 6.5rem;
}

/* =========================================================
   27. GÉOMÉTRIE STABLE DE LA GALERIE
   Toutes les photos partagent la même fenêtre. Une image verticale
   ne peut plus agrandir la carte, recouvrir les repères ou déplacer
   la page pendant un changement de zone.
   ========================================================= */
@media (min-width: 1081px) {
  .zg__scene {
    height: 40rem;
    overflow: hidden;
  }

  .zg-carte {
    box-sizing: border-box;
    height: 34rem;
    min-height: 34rem;
    max-height: 34rem;
    margin-top: -17rem;
    grid-template-rows: auto 13.5rem minmax(0, auto) auto auto;
    align-content: start;
    overflow: hidden;
  }

  .zg-carte__visuel,
  .zg-carte__visuel.is-personnalise {
    height: 13.5rem;
    min-height: 13.5rem;
    max-height: 13.5rem;
  }

  .zg-carte__court {
    max-height: 4.7rem;
    overflow: hidden;
  }

  .zg__reperes {
    position: relative;
    z-index: 35;
    margin-top: 1.25rem;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .zg__scene {
    height: 35rem;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }

  .zg-carte {
    box-sizing: border-box;
    height: 31rem;
    min-height: 31rem;
    max-height: 31rem;
    margin-top: -15.5rem;
    grid-template-rows: auto 11.5rem minmax(0, auto) auto auto;
    align-content: start;
    overflow: hidden;
  }

  .zg-carte__visuel,
  .zg-carte__visuel.is-personnalise {
    height: 11.5rem;
    min-height: 11.5rem;
    max-height: 11.5rem;
  }

  .zg-carte__court {
    max-height: 4.7rem;
    overflow: hidden;
  }
}

@media (max-width: 720px) {
  .zg__anneau[data-mode="bande"] .zg-carte {
    box-sizing: border-box;
    height: 32rem;
    min-height: 32rem;
    max-height: 32rem;
    grid-template-rows: auto 13.25rem minmax(0, auto) auto auto;
    align-content: start;
    overflow: hidden;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__visuel,
  .zg__anneau[data-mode="bande"] .zg-carte__visuel.is-personnalise {
    height: 13.25rem;
    min-height: 13.25rem;
    max-height: 13.25rem;
  }

  .zg__anneau[data-mode="bande"] .zg-carte__court {
    max-height: 3.8rem;
    overflow: hidden;
  }
}

/* =========================================================
   29. LECTURE « DÉCOUVRIR » — DÉFILEMENT UNIQUE ET NATUREL
   La page de lecture entière défile. Le panneau ne possède plus
   de zone de scroll interne susceptible de masquer sa fin.
   ========================================================= */
.zg-lecture {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 0 !important;
  background: #17181f;
}

.zg-lecture__voile {
  position: fixed !important;
  inset: 0;
  background: #17181f !important;
}

.zg-lecture__plan,
.zg-lecture.is-open .zg-lecture__plan {
  position: relative;
  width: min(100%, 88rem) !important;
  max-width: 88rem !important;
  min-height: 100svh;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: clamp(5.5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #17181f !important;
  box-shadow: none !important;
}

.zg-lecture__plan::before {
  display: none !important;
}

.zg-lecture__fermer {
  position: fixed !important;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 8;
}

@media (max-width: 720px) {
  .zg-lecture__plan,
  .zg-lecture.is-open .zg-lecture__plan {
    width: 100% !important;
    min-height: 100svh;
    padding: max(4.75rem, calc(env(safe-area-inset-top) + 4rem)) 1.15rem max(3.5rem, calc(env(safe-area-inset-bottom) + 2.5rem)) !important;
  }

  .zg-lecture__fermer {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Les dix repères restent tous visibles sur téléphone. */
@media (max-width: 720px) {
  .zg__reperes {
    box-sizing: border-box;
    width: min(calc(100% - 1.5rem), 30rem);
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch !important;
    gap: .4rem !important;
    margin: .65rem auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .zg__reperes li {
    min-width: 0;
    width: 100%;
  }

  .zg__reperes button {
    width: 100%;
    min-height: 2.35rem !important;
    padding: .42rem .35rem !important;
    font-size: .58rem !important;
    line-height: 1.2;
    letter-spacing: .06em !important;
    white-space: normal !important;
    text-wrap: balance;
  }
}