/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/city/city-page.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.city-page {
  --city-ink: #172f4a;
  --city-muted: #52677d;
  --city-gold: #c9a84e;
  background: #e4dac8;
  color: var(--city-ink);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.city-scene-section {
  height: 100%;
  min-height: 0;
  width: 100%;
}

.city-scene-frame {
  --city-overlay-inset-left: clamp(0.75rem, 1.5vw, 1.5rem);
  --city-overlay-inset-top: clamp(0.75rem, 2vh, 1.5rem);
  /* Le fond porte la vignette floue de l'affiche (inline, dans le HTML) : l'écosystème est là
     dès le premier rendu, avant toute requête (site-2). */
  background: #e4dac8;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* LE PANEL DU PROJET (porteur, 2026-08-09 et 2026-08-11, verbatims 00G, 00H, 00I).
   
   Il a d'abord été une carte d'interface générique — refusée. J'ai alors retiré le
   cadre en invoquant la règle de l'ÉNONCÉ du deck (« aucun cadre, aucun fond : la
   typographie se suffit ») — refusée aussi, et pour une raison que la règle elle-même
   ne couvrait pas : elle vaut pour un texte posé sur une PAGE, où le papier existe
   déjà. Ici le texte est posé SUR une scène 3D. Sans surface, il flotte et devient
   illisible dès que la cité passe dessous.
   
   La maison a l'objet qu'il faut, et c'est l'affichette du deck (`deck.css .deck-card`) :
   « un cadre qui tient le papier », des zones cloisonnées par un filet doré, une ombre
   en DEUX PLANS. Le panel en reprend la grammaire, à sa mesure.
   
   La variante papier clair + lettrine a ensuite été refusée : elle faisait « caractère
   écrit gros » sans porter l'âme du projet. Le panneau reprend donc le podium navy du
   chip Accueil actif et sa plume serif italique champagne, à l'échelle d'un manifeste. */
.city-statement {
  --pres-serif: var(--font-pres-serif);
  backdrop-filter: blur(14px) saturate(112%);
  background:
    radial-gradient(
      115% 92% at -4% -8%,
      rgb(215 188 118 / 0.18),
      transparent 54%
    ),
    linear-gradient(110deg, rgb(255 255 255 / 0.075), transparent 44%),
    linear-gradient(160deg, #1b3a5c 0%, #0f2438 100%);
  border: 1px solid color-mix(in srgb, var(--city-gold) 84%, #fff1c9);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.15),
    inset 0 -1px 0 rgb(2 16 31 / 0.5),
    0 2px 3px rgb(15 36 56 / 0.22),
    0 20px 50px -16px rgb(15 36 56 / 0.54),
    0 38px 76px -38px rgb(2 16 31 / 0.48);
  isolation: isolate;
  max-width: min(26rem, calc(100% - 2rem));
  overflow: hidden;
  padding: 1.7rem 1.8rem 1.35rem;
  position: absolute;
  /* Dans le coin supérieur GAUCHE, « comme cela l'était » (porteur, 2026-09-03 09h39) ;
     l'épingle le replie contre le bord gauche quand on a fini de lire. */
  left: var(--city-overlay-inset-left);
  top: var(--city-overlay-inset-top);
  transition:
    max-width 320ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 320ms ease;
  z-index: 7;
}

/* L'ÉPINGLE (verbatim 00d) : une pastille muette dans le coin, dans la matière du panneau — or
   sur navy. Épinglé, elle tient le panneau ouvert ; désépinglé, le panneau se replie sur le côté
   et il ne reste que la languette : l'épingle, penchée, et la balise allumée. */
.city-statement__pin {
  align-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.16), transparent 42%),
    linear-gradient(145deg, #234a6d, #142f4b 74%);
  border: 1px solid color-mix(in srgb, var(--city-gold) 70%, transparent);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 2px 5px rgb(2 16 31 / 0.36);
  color: #e7ca78;
  cursor: pointer;
  display: inline-flex;
  height: 2.1rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.85rem;
  top: 0.85rem;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  width: 2.1rem;
  z-index: 5;
}

.city-statement__pin svg {
  fill: currentColor;
  transition: transform 220ms ease;
}

.city-statement__pin:hover,
.city-statement__pin:focus-visible {
  border-color: var(--city-gold);
  color: #fff1c9;
  outline: none;
  transform: translateY(-1px);
}

.city-statement__pin:focus-visible {
  box-shadow: 0 0 0 3px rgb(201 168 78 / 0.28);
}

/* Replié : le panneau n'est plus que sa languette, ancrée au même endroit du bord gauche. */
.city-statement[data-pinned="false"] {
  border-radius: 999px;
  max-width: 3.4rem;
  min-height: 3.4rem;
  padding: 0.65rem;
}

.city-statement[data-pinned="false"]::after {
  border-radius: 999px;
  inset: 3px;
}

.city-statement[data-pinned="false"] .city-statement__pin {
  position: static;
}

.city-statement[data-pinned="false"] .city-statement__pin svg {
  transform: rotate(-38deg);
}

/* La balise de la languette : le panneau replié reste vivant, sans clignoter. */
.city-statement[data-pinned="false"] .city-statement__pin::after {
  animation: city-beacon 2.6s ease-in-out infinite;
  background: #e1bf60;
  border-radius: 50%;
  box-shadow: 0 0 0.6rem rgb(225 191 96 / 0.55);
  content: "";
  height: 6px;
  position: absolute;
  right: -1px;
  top: -1px;
  width: 6px;
}

.city-statement__body[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .city-statement,
  .city-statement__pin,
  .city-statement__pin svg {
    transition: none;
  }

  .city-statement[data-pinned="false"] .city-statement__pin::after {
    animation: none;
    opacity: 1;
  }
}

/* Un second filet, presque gravé dans la matière, donne une vraie épaisseur au
   panneau sans ajouter de surface ni modifier son emprise. */
.city-statement::after {
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 2px;
  box-shadow: inset 0 0 1.5rem rgb(255 255 255 / 0.045);
  content: "";
  inset: 5px;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.city-statement:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--city-gold) 78%, white);
  outline-offset: 3px;
}

/* Le filet qui ouvre le bloc — 3 px en dégradé d'or, la signature du registre
   (`deck.css .deck-home__title::after`). Un trait d'un pixel n'est pas un filet,
   c'est un cheveu. */
.city-statement__body::before {
  background: linear-gradient(
    90deg,
    #d9ba63,
    color-mix(in srgb, var(--city-gold) 52%, transparent) 64%,
    transparent
  );
  border-radius: 2px;
  box-shadow: 0 0 0.8rem rgb(201 168 78 / 0.22);
  content: "";
  display: block;
  height: 3px;
  margin-bottom: 1.15rem;
  width: 3.6rem;
}

.city-statement__text {
  color: #f5ecd9;
  font-family: var(--pres-serif), Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: clamp(1.16rem, 1.3vw, 1.36rem);
  font-style: italic;
  font-weight: 500;
  hyphens: none;
  letter-spacing: -0.006em;
  line-height: 1.42;
  margin: 0;
  text-shadow:
    0 1px 0 rgb(2 16 31 / 0.78),
    0 0.7rem 1.8rem rgb(2 16 31 / 0.24);
  text-wrap: pretty;
}

/* Les deux points dorés qui feuillettent l'étage haut (définition du projet,
   puis renversement de l'IA — verbatim 000 du 2026-08-12). Des repères muets à
   intitulé porté par l'aria et le tooltip, jamais un texte : le panel reste une
   affichette, pas un carrousel. */
.city-statement__pager {
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
  margin: 0.8rem 0 0;
}

.city-statement__page-dot {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--city-gold) 78%, transparent);
  border-radius: 50%;
  cursor: pointer;
  height: 0.95rem;
  padding: 0;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  width: 0.95rem;
}

.city-statement__page-dot[aria-current="true"] {
  background: var(--city-gold);
  box-shadow: 0 0 0.55rem rgb(225 191 96 / 0.5);
}

.city-statement__page-dot:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--city-gold) 78%, white);
  outline-offset: 2px;
}

/* La cloison dorée de l'affichette : les messages sont une zone, pas une ligne de
   plus. Elle est en retrait dans la page pour que le filet aille d'un bord à
   l'autre du papier, comme sur la carte. */
.city-statement__ticker {
  align-items: flex-start;
  background:
    radial-gradient(90% 140% at 0% 50%, rgb(73 111 143 / 0.32), transparent 62%),
    linear-gradient(100deg, #112a44 0%, #1d3f60 58%, #173550 100%);
  border-top: 1px solid rgb(219 184 88 / 0.72);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 0 1.6rem rgb(2 16 31 / 0.18);
  color: #f5ecd9;
  display: flex;
  font-size: clamp(0.86rem, 0.92vw, 0.94rem);
  gap: 0.8rem;
  line-height: 1.5;
  margin: 1.45rem -1.8rem -1.35rem;
  min-height: 3.4em;
  overflow: hidden;
  padding: 1.05rem 1.8rem 1.15rem;
  position: relative;
}

/* Reflet extrêmement lent d'un vitrage urbain. Il ne porte aucune information
   et s'immobilise avec le message. */
.city-statement__ticker::after {
  animation: city-rail-glint 9s ease-in-out infinite;
  background: linear-gradient(
    102deg,
    transparent 0%,
    rgb(255 245 211 / 0.02) 42%,
    rgb(255 245 211 / 0.14) 50%,
    rgb(255 245 211 / 0.02) 58%,
    transparent 100%
  );
  content: "";
  inset: 0 auto 0 -70%;
  pointer-events: none;
  position: absolute;
  transform: skewX(-16deg);
  width: 62%;
}

/* La balise allumée : elle dit que le bloc est vivant, sans clignoter — un
   clignotement franc serait tout sauf premium, et illisible à la longue. */
.city-statement__beacon {
  animation: city-beacon 2.6s ease-in-out infinite;
  background: #e1bf60;
  border-radius: 50%;
  box-shadow: 0 0 0.85rem rgb(225 191 96 / 0.55);
  flex: 0 0 auto;
  height: 7px;
  margin-top: 0.62em;
  position: relative;
  width: 7px;
  z-index: 1;
}

.city-statement__message {
  animation: city-message-in 520ms ease-out both;
  letter-spacing: 0.006em;
  position: relative;
  text-shadow: 0 0 1rem rgb(232 202 121 / 0.16);
  z-index: 1;
}

@keyframes city-beacon {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(201 168 78 / 0.5);
    opacity: 0.45;
  }
  50% {
    box-shadow: 0 0 0 0.32rem rgb(201 168 78 / 0);
    opacity: 1;
  }
}

@keyframes city-message-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes city-rail-glint {
  0%,
  48% {
    left: -70%;
    opacity: 0;
  }
  55% {
    opacity: 0.72;
  }
  72% {
    left: 118%;
    opacity: 0;
  }
  100% {
    left: 118%;
    opacity: 0;
  }
}

/* Immobile : la rotation est coupée côté composant, l'animation l'est ici. */
.city-statement__ticker[data-still="true"] .city-statement__beacon,
.city-statement__ticker[data-still="true"] .city-statement__message,
.city-statement__ticker[data-still="true"]::after,
.city-statement__ticker[data-paused="true"] .city-statement__beacon,
.city-statement__ticker[data-paused="true"] .city-statement__message,
.city-statement__ticker[data-paused="true"]::after {
  animation: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .city-statement__beacon,
  .city-statement__message,
  .city-statement__ticker::after {
    animation: none;
    opacity: 1;
  }
}

.city-scene-frame > .city-scene-host {
  inset: 0;
  position: absolute;
  width: 100%;
}

.city-page-status {
  min-height: min(68dvh, 52rem);
  position: relative;
}

.city-webgl-fallback {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  margin: 0;
  padding: 2rem;
  position: absolute;
  text-align: center;
}

.city-accessible-content {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.city-readable-steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0 0 4rem;
}

.city-readable-steps > li > article {
  background: rgb(255 255 255 / 0.72);
  border: 1px solid rgb(23 47 74 / 0.12);
  border-radius: 1rem;
  height: 100%;
  padding: 1.2rem;
}

.city-readable-steps h2,
.city-readable-steps h3,
.city-readable-steps p {
  margin: 0;
}

.city-readable-steps h2 {
  font-family: var(--pres-serif, serif);
  font-size: 1.5rem;
}

.city-readable-steps header > p:first-child,
.city-readable-steps li li > p:first-child {
  color: var(--city-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.city-readable-steps header > p:last-child,
.city-readable-steps article > p {
  color: var(--city-muted);
  margin-top: 0.45rem;
}

.city-readable-steps ul {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.city-readable-steps li li {
  border-left: 2px solid var(--city-gold);
  padding-left: 0.75rem;
}

.city-readable-steps li li > p:last-child {
  color: var(--city-muted);
  margin-top: 0.2rem;
}

@media (max-width: 47.99rem) {
  .city-page {
    height: calc(100dvh - 5.5rem);
    min-height: 32rem;
  }

  /* Sur un écran étroit le titre tient tout le haut : le panel se range dessous,
     sur toute la largeur, et reste au-dessus de la cité qu'on peut déplacer. */
  .city-statement {
    left: 1rem;
    max-width: none;
    padding: 1.15rem 1.2rem 0.95rem;
    right: 1rem;
    top: 13.25rem;
  }

  .city-statement[data-pinned="false"] {
    max-width: 3.4rem;
    padding: 0.65rem;
    right: auto;
  }

  .city-statement__text {
    font-size: 1.08rem;
    line-height: 1.4;
  }

  .city-statement__ticker {
    margin: 1.1rem -1.2rem -0.95rem;
    padding: 0.85rem 1.2rem 0.9rem;
  }
}

/* LA COUVERTURE (chantier réseau du Site, site-2, 2026-09-06) — au site, jamais au paquet :
   l'affiche rendue par le paquet sous la pulsation du site, jusqu'à la première image WebGL ;
   sur réseau lent, elle reste et porte le bouton qui ouvre la 3D. Sous le panneau du projet
   (z 5/7) et le badge TV (z 11), au-dessus de l'hôte. */
.city-scene-frame > .city-scene-cover {
  inset: 0;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transition: opacity 400ms ease;
  z-index: 4;
}

/* L'image se peint dès qu'elle arrive, sans JavaScript : avant, la vignette floue du cadre se
   voit à travers (un <img> non chargé ne peint rien). */
.city-scene-cover picture,
.city-scene-cover img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.city-scene-cover[data-etat="montee"] {
  opacity: 0;
}

.city-scene-cover-pulse {
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
}

/* Au centre du cadre, pas en bas : à la première visite, le bandeau de consentement couvre le bas
   de l'écran (vu dans le navigateur le 2026-09-06). */
.city-scene-open {
  background: linear-gradient(145deg, #ead27d, var(--city-gold));
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
  box-shadow: 0 0.65rem 1.8rem rgb(23 47 74 / 0.28);
  color: var(--city-ink);
  cursor: pointer;
  font: 600 1.05rem/1.2 var(--pres-serif, serif);
  left: 50%;
  padding: 1rem 1.8rem;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.city-scene-open:hover {
  transform: translate(-50%, -50%) scale(1.04);
}

.city-scene-open:focus-visible {
  outline: 2px solid var(--city-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .city-scene-cover,
  .city-scene-open {
    transition: none;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../../../../packages/smatflow-city/src/montage/styles.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.smatflow-city-host,
.smatflow-city-tags {
  --smatflow-city-cream: #f0ebe3;
  --smatflow-city-white: #ffffff;
  --smatflow-city-navy: #1b3a5c;
  --smatflow-city-gold: #c9a84e;
  --smatflow-city-gold-dark: #8b6914;
}

.smatflow-city-host {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: layout paint style;
}

.smatflow-city-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.smatflow-city-canvas--survol {
  cursor: pointer;
}

.smatflow-city-tags {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.smatflow-city-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem .3rem .3rem;
  border: 1px solid color-mix(in srgb, var(--smatflow-city-navy) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--smatflow-city-white) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 5px 18px -8px color-mix(in srgb, var(--smatflow-city-navy) 65%, transparent);
  color: var(--smatflow-city-navy);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition:
    background .18s,
    border-color .18s,
    box-shadow .18s,
    filter .18s,
    opacity .18s;
}

.smatflow-city-tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1.5px;
  height: .7rem;
  background: color-mix(in srgb, var(--smatflow-city-navy) 32%, transparent);
}

.smatflow-city-tag__rang {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--smatflow-city-navy);
  color: var(--smatflow-city-cream);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.smatflow-city-tag__nom {
  padding-right: .15rem;
}

.smatflow-city-tag--niveau .smatflow-city-tag__rang {
  border: 1.5px solid color-mix(in srgb, var(--smatflow-city-navy) 45%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--smatflow-city-navy) 72%, transparent);
}

.smatflow-city-tag--court {
  gap: 0;
  padding: .2rem;
  background: color-mix(in srgb, var(--smatflow-city-white) 78%, transparent);
  border-color: color-mix(in srgb, var(--smatflow-city-navy) 15%, transparent);
  box-shadow: 0 4px 13px -8px color-mix(in srgb, var(--smatflow-city-navy) 58%, transparent);
  opacity: .9;
}

.smatflow-city-tag--court .smatflow-city-tag__nom {
  display: none;
}

.smatflow-city-tag--court .smatflow-city-tag__rang {
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .22rem;
  font-size: .84rem;
}

/* Une collision ne supprime jamais un nœud et ne déplace jamais son ancrage :
   la pastille concurrente reste visible, mais passe derrière la lecture principale. */
.smatflow-city-tag--dense {
  filter: saturate(.62);
  opacity: .46;
  z-index: 0;
}

.smatflow-city-tag--dense .smatflow-city-tag__rang {
  min-width: 1.28rem;
  height: 1.28rem;
  font-size: .7rem;
}

.smatflow-city-tag--absent {
  opacity: 0;
}

.smatflow-city-tag--actif {
  border-color: var(--smatflow-city-gold);
  background: var(--smatflow-city-white);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--smatflow-city-gold) 28%, transparent),
    0 6px 18px -8px color-mix(in srgb, var(--smatflow-city-navy) 60%, transparent);
}

.smatflow-city-tag--survol {
  border-color: color-mix(in srgb, var(--smatflow-city-gold) 72%, white);
  background: var(--smatflow-city-white);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--smatflow-city-gold) 20%, transparent),
    0 7px 20px -8px color-mix(in srgb, var(--smatflow-city-navy) 68%, transparent);
}

.smatflow-city-tag--actif,
.smatflow-city-tag--survol {
  filter: none;
  opacity: 1;
  z-index: 4;
}

.smatflow-city-tag--actif .smatflow-city-tag__rang {
  background: var(--smatflow-city-gold-dark);
}

.smatflow-city-tag--actif .smatflow-city-tag__nom,
.smatflow-city-tag--survol .smatflow-city-tag__nom {
  display: inline;
}

.smatflow-city-tag--actif::after {
  width: 2px;
  background: var(--smatflow-city-gold);
}

/* Quand une fiche est ciblée, les autres repères restent disponibles sans lutter
   avec elle. L'effet ne change ni leur DOM, ni leur hitbox Three.js. */
.smatflow-city-tag--secondaire:not(.smatflow-city-tag--survol) {
  filter: saturate(.55);
  opacity: .24;
}

@media (max-width: 720px) {
  .smatflow-city-tag .smatflow-city-tag__nom {
    display: none;
  }

  .smatflow-city-tag--actif .smatflow-city-tag__nom,
  .smatflow-city-tag--survol .smatflow-city-tag__nom {
    display: inline;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../../../../packages/smatflow-city-v2/src/montage/styles.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.smatflow-city-host,
.smatflow-city-tags {
  --smatflow-city-cream: #f0ebe3;
  --smatflow-city-white: #ffffff;
  --smatflow-city-navy: #1b3a5c;
  --smatflow-city-gold: #c9a84e;
  --smatflow-city-gold-dark: #8b6914;
}

.smatflow-city-host {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: layout paint style;
}

.smatflow-city-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.smatflow-city-canvas--survol {
  cursor: pointer;
}

.smatflow-city-tags {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.smatflow-city-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem .3rem .3rem;
  border: 1px solid color-mix(in srgb, var(--smatflow-city-navy) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--smatflow-city-white) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 5px 18px -8px color-mix(in srgb, var(--smatflow-city-navy) 65%, transparent);
  color: var(--smatflow-city-navy);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition:
    background .18s,
    border-color .18s,
    box-shadow .18s,
    filter .18s,
    opacity .18s;
}

.smatflow-city-tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1.5px;
  height: .7rem;
  background: color-mix(in srgb, var(--smatflow-city-navy) 32%, transparent);
}

.smatflow-city-tag__rang {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--smatflow-city-navy);
  color: var(--smatflow-city-cream);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.smatflow-city-tag__nom {
  padding-right: .15rem;
}

.smatflow-city-tag--niveau .smatflow-city-tag__rang {
  border: 1.5px solid color-mix(in srgb, var(--smatflow-city-navy) 45%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--smatflow-city-navy) 72%, transparent);
}

.smatflow-city-tag--court {
  gap: 0;
  padding: .2rem;
  background: color-mix(in srgb, var(--smatflow-city-white) 78%, transparent);
  border-color: color-mix(in srgb, var(--smatflow-city-navy) 15%, transparent);
  box-shadow: 0 4px 13px -8px color-mix(in srgb, var(--smatflow-city-navy) 58%, transparent);
  opacity: .9;
}

.smatflow-city-tag--court .smatflow-city-tag__nom {
  display: none;
}

.smatflow-city-tag--court .smatflow-city-tag__rang {
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .22rem;
  font-size: .84rem;
}

/* Une collision ne supprime jamais un nœud et ne déplace jamais son ancrage :
   la pastille concurrente reste visible, mais passe derrière la lecture principale. */
.smatflow-city-tag--dense {
  filter: saturate(.62);
  opacity: .46;
  z-index: 0;
}

.smatflow-city-tag--dense .smatflow-city-tag__rang {
  min-width: 1.28rem;
  height: 1.28rem;
  font-size: .7rem;
}

.smatflow-city-tag--absent {
  opacity: 0;
}

.smatflow-city-tag--actif {
  border-color: var(--smatflow-city-gold);
  background: var(--smatflow-city-white);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--smatflow-city-gold) 28%, transparent),
    0 6px 18px -8px color-mix(in srgb, var(--smatflow-city-navy) 60%, transparent);
}

.smatflow-city-tag--survol {
  border-color: color-mix(in srgb, var(--smatflow-city-gold) 72%, white);
  background: var(--smatflow-city-white);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--smatflow-city-gold) 20%, transparent),
    0 7px 20px -8px color-mix(in srgb, var(--smatflow-city-navy) 68%, transparent);
}

.smatflow-city-tag--actif,
.smatflow-city-tag--survol {
  filter: none;
  opacity: 1;
  z-index: 4;
}

.smatflow-city-tag--actif .smatflow-city-tag__rang {
  background: var(--smatflow-city-gold-dark);
}

.smatflow-city-tag--actif .smatflow-city-tag__nom,
.smatflow-city-tag--survol .smatflow-city-tag__nom {
  display: inline;
}

.smatflow-city-tag--actif::after {
  width: 2px;
  background: var(--smatflow-city-gold);
}

/* Quand une fiche est ciblée, les autres repères restent disponibles sans lutter
   avec elle. L'effet ne change ni leur DOM, ni leur hitbox Three.js. */
.smatflow-city-tag--secondaire:not(.smatflow-city-tag--survol) {
  filter: saturate(.55);
  opacity: .24;
}

@media (max-width: 720px) {
  .smatflow-city-tag .smatflow-city-tag__nom {
    display: none;
  }

  .smatflow-city-tag--actif .smatflow-city-tag__nom,
  .smatflow-city-tag--survol .smatflow-city-tag__nom {
    display: inline;
  }
}

/* Le retour caméra pendant un enregistrement (docs/10, porteur 2026-09-03 06h56) : en haut à
   gauche, en miroir, dans un cadre à crochets d'or — là où la caméra est dans le fichier. */
.smatflow-city-retour-camera {
  position: absolute;
  left: 1.5%;
  top: 1.5%;
  width: 22%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scaleX(-1);
  border-radius: 4%/5.33%;
  border: 1px solid rgb(201 168 78 / 0.7);
  box-shadow: 0 2px 4px rgb(23 47 74 / 0.18), 0 18px 40px -18px rgb(23 47 74 / 0.45);
  background: #102b47;
  pointer-events: none;
  z-index: 5;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   LE CHROME (montage/chrome.ts) — le bloc de titre sur son voile de lecture, la barre de
   commandes muettes. Une seule implémentation : la standalone et le site l'utilisent telle
   quelle, aucun ne la restyle (porteur, 2026-09-03 08h26). Tout est relatif à l'hôte
   (`.smatflow-city-host`, position: relative), qui est le viewport dans la standalone.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* Le DOUBLE TON du fond de décor (porteur, 2026-09-03 08h48) : un voile clair du haut vers rien,
   derrière le bloc de titre, qui se fond dans le gazon — la surface de lecture du titre. Sous les
   tags (z 2). */
.smatflow-city-host::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(14rem, 34vh, 22rem);
  background: linear-gradient(180deg, rgb(244 240 230 / 0.86) 0%, rgb(244 240 230 / 0.6) 50%, rgb(244 240 230 / 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.smatflow-city-host .chrome {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* Le bloc de titre de V1, rigoureusement : une ligne, un tiret, un texte en bas — centré, serif,
   et « encore plus imposant » (porteur, 2026-09-02 19h47). */
.smatflow-city-host .titre-bloc {
  top: clamp(1rem, 3.5vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 62rem);
  text-align: center;
  color: var(--smatflow-city-navy);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Le style TECHNO du site (porteur, 2026-09-03 08h43-08h44) : le titre navy détaché du gazon par un
   halo clair, sans voile ; le sous-titre en clair, porté par une ombre. */
.smatflow-city-host .titre-bloc h1 {
  margin: 0;
  font-family: 'Crimson Pro', 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--smatflow-city-navy);
  text-shadow:
    0 0 1px rgb(255 255 255 / .95),
    0 1px 0 rgb(255 255 255 / .85),
    0 0 12px rgb(255 255 255 / .7),
    0 0 28px rgb(255 255 255 / .45);
}

.smatflow-city-host .titre-bloc .tiret {
  display: block;
  width: 5rem;
  height: 3px;
  margin: .3rem auto .5rem;
  border-radius: 2px;
  background: var(--smatflow-city-gold);
}

/* « Plus lisible, pas gras, l'encre plus appuyée » (porteur, 2026-09-03 05h27) : l'encre navy
   pleine sur le voile clair, un halo léger. */
.smatflow-city-host .titre-bloc .sous {
  display: block;
  margin: 0 auto;
  max-width: 62ch;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .005em;
  color: var(--smatflow-city-navy);
  text-decoration: none;
  text-shadow: 0 0 1px rgb(255 255 255 / .6), 0 1px 12px rgb(255 255 255 / .4);
}

/* Le sous-titre-lien (le site) : même encre, même surface ; il reçoit le pointeur. */
.smatflow-city-host .titre-bloc a.sous {
  pointer-events: auto;
  cursor: pointer;
}

.smatflow-city-host .titre-bloc a.sous:hover,
.smatflow-city-host .titre-bloc a.sous:focus-visible {
  color: var(--smatflow-city-gold-dark);
  outline: none;
}

/* ── LES COMMANDES : icône muette + infobulle, jamais de texte (doctrine du 2026-06-12). ── */
.smatflow-city-host .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.smatflow-city-host .city-scene-toolbar > * {
  pointer-events: auto;
}

.smatflow-city-host .city-controls {
  align-items: center;
  bottom: clamp(3.25rem, 10vh, 5.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  left: clamp(0.75rem, 1.8vw, 1.75rem);
  position: absolute;
  z-index: 6;
}

.smatflow-city-host .city-controls fieldset {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.smatflow-city-host .city-control {
  -webkit-backdrop-filter: blur(14px) saturate(116%);
  align-items: center;
  backdrop-filter: blur(14px) saturate(116%);
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.96), transparent 38%),
    linear-gradient(145deg, rgb(255 255 252 / 0.92), rgb(239 228 208 / 0.86));
  border: 1px solid rgb(201 168 78 / 0.52);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.96),
    inset 0 -1px 0 rgb(114 83 24 / 0.08),
    0 2px 4px rgb(23 47 74 / 0.14),
    0 0.75rem 1.8rem -0.65rem rgb(23 47 74 / 0.28);
  color: var(--smatflow-city-navy);
  cursor: pointer;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
  width: 2.5rem;
}

.smatflow-city-host .city-control::after {
  border: 1px solid rgb(255 255 255 / 0.58);
  border-radius: inherit;
  content: "";
  inset: 3px;
  pointer-events: none;
  position: absolute;
}

.smatflow-city-host .city-control:hover {
  border-color: rgb(201 168 78 / 0.82);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.98), 0 2px 5px rgb(23 47 74 / 0.16), 0 0.9rem 2rem -0.6rem rgb(23 47 74 / 0.34), 0 0 0 3px rgb(201 168 78 / 0.09);
  transform: translateY(-1px);
}

.smatflow-city-host .city-control:active {
  transform: translateY(0) scale(0.97);
}

.smatflow-city-host .city-control:focus-visible {
  outline: 2px solid var(--smatflow-city-navy);
  outline-offset: 3px;
}

.smatflow-city-host .city-control[aria-pressed="true"] {
  background:
    radial-gradient(circle at 28% 18%, rgb(107 143 181 / 0.34), transparent 40%),
    linear-gradient(145deg, #214665, #102b47 72%);
  border-color: rgb(225 191 96 / 0.82);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -1px 0 rgb(0 10 24 / 0.34), 0 2px 5px rgb(23 47 74 / 0.22), 0 0.85rem 2rem -0.55rem rgb(23 47 74 / 0.5), 0 0 0 3px rgb(201 168 78 / 0.1);
  color: #fff8e8;
}

.smatflow-city-host .city-control[aria-pressed="true"]::after {
  border-color: rgb(225 191 96 / 0.2);
}

.smatflow-city-host .city-control:disabled {
  cursor: not-allowed;
  filter: saturate(45%);
  opacity: 0.46;
  transform: none;
}

/* ── LA PASTILLE « i » (porteur, 2026-09-03 10h08) : la sélection la rend disponible en haut à
   droite — à côté du badge TV que l'hôte y pose — ; elle ouvre la fiche à la demande. ── */
.smatflow-city-host .city-information-trigger {
  animation: smatflow-city-menu-enter 240ms cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 9;
}

.smatflow-city-host .city-information-trigger[hidden] {
  display: none;
}

.smatflow-city-host .city-information-trigger[aria-expanded="true"] {
  background:
    radial-gradient(circle at 28% 18%, rgb(107 143 181 / 0.34), transparent 40%),
    linear-gradient(145deg, #214665, #102b47 72%);
  border-color: rgb(225 191 96 / 0.82);
  color: #fff8e8;
}

/* ── L'ENREGISTREUR (docs/10) : la pastille, rouge quand elle enregistre, le chronomètre à côté,
   le menu d'icônes (micro barré, micro, caméra ; puis la pastille qui démarre). ── */
.smatflow-city-host .city-record {
  position: relative;
  display: flex;
  align-items: center;
}

.smatflow-city-host .city-control--record[aria-pressed="true"] {
  background:
    radial-gradient(circle at 28% 18%, rgb(255 190 170 / 0.5), transparent 42%),
    linear-gradient(145deg, #b3261e, #7a1410 72%);
  border-color: rgb(225 191 96 / 0.85);
  color: #fff4ee;
  animation: smatflow-city-record-pulse 1.6s ease-in-out infinite;
}

@keyframes smatflow-city-record-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 2px 5px rgb(23 47 74 / 0.22), 0 0 0 3px rgb(179 38 30 / 0.18); }
  50% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 2px 5px rgb(23 47 74 / 0.22), 0 0 0 7px rgb(179 38 30 / 0.06); }
}

.smatflow-city-host .city-record-chrono {
  position: absolute;
  left: calc(100% + .55rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .18rem .6rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #142f4b, #214665);
  border: 1px solid rgb(225 191 96 / 0.6);
  color: #fff8e8;
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgb(23 47 74 / 0.22);
}

.smatflow-city-host .city-record-chrono[hidden] {
  display: none;
}

.smatflow-city-host .city-record-chrono--longue {
  color: #d7bc76;
}

.smatflow-city-host .city-record-menu {
  position: absolute;
  left: calc(100% + .7rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .55rem;
  background:
    radial-gradient(110% 95% at 100% 100%, rgb(225 191 96 / 0.16), transparent 58%),
    linear-gradient(160deg, rgb(255 255 252 / 0.97), rgb(245 237 222 / 0.95));
  border: 1px solid color-mix(in srgb, var(--smatflow-city-gold) 58%, #fff8e8);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.94), 0 2px 4px rgb(23 47 74 / 0.14), 0 24px 56px -20px rgb(23 47 74 / 0.4);
  z-index: 11;
  animation: smatflow-city-menu-enter 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes smatflow-city-menu-enter {
  from { opacity: 0; transform: translateY(-50%) translateX(-0.3rem); }
  to { opacity: 1; transform: translateY(-50%); }
}

.smatflow-city-host .city-record-menu[hidden] {
  display: none;
}

.smatflow-city-host .city-record-menu__choix {
  display: flex;
  gap: .35rem;
}

.smatflow-city-host .city-record-menu__option {
  width: 2.15rem;
  height: 2.15rem;
}

.smatflow-city-host .city-record-menu__option[aria-checked="true"] {
  background:
    radial-gradient(circle at 28% 18%, rgb(107 143 181 / 0.34), transparent 40%),
    linear-gradient(145deg, #214665, #102b47 72%);
  border-color: rgb(225 191 96 / 0.82);
  color: #fff8e8;
}

.smatflow-city-host .city-record-menu__filet {
  width: 1px;
  height: 1.6rem;
  background: rgb(201 168 78 / 0.5);
}

.smatflow-city-host .city-record-menu__demarrer {
  width: 2.15rem;
  height: 2.15rem;
  color: #b3261e;
}

.smatflow-city-host .city-record-menu__demarrer:hover,
.smatflow-city-host .city-record-menu__demarrer:focus-visible {
  color: #7a1410;
}

@media (prefers-reduced-motion: reduce) {
  .smatflow-city-host .city-control { transition: none; }
  .smatflow-city-host .city-control:hover,
  .smatflow-city-host .city-control:active { transform: none; }
  .smatflow-city-host .city-record-menu { animation: none; }
}

/* ── LA FICHE D'UN OBJET : la carte d'objet du site (web-public `city-page.css`), copiée telle
   quelle — le composant ne réinvente pas son panneau. Seul écart : `position: fixed` (la
   standalone est plein écran) et la fiche s'ouvre sous le bloc de titre. ── */
.smatflow-city-host { --city-gold: var(--smatflow-city-gold); --pres-serif: 'Crimson Pro', 'Fraunces', Georgia, 'Times New Roman', serif; --city-ink: var(--smatflow-city-navy); --city-muted: color-mix(in srgb, var(--smatflow-city-navy) 62%, transparent); --gold-dark: var(--smatflow-city-gold-dark); --navy: var(--smatflow-city-navy); --gold-light: #e7ca78; }
.city-object-card {
  animation: city-object-enter 320ms cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(18px);
  background:
    radial-gradient(110% 95% at 100% 100%, rgb(225 191 96 / 0.16), transparent 58%),
    linear-gradient(160deg, rgb(255 255 252 / 0.97), rgb(245 237 222 / 0.95));
  border: 1px solid color-mix(in srgb, var(--city-gold) 58%, #fff8e8);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.94),
    0 2px 4px rgb(23 47 74 / 0.14),
    0 24px 56px -20px rgb(23 47 74 / 0.4),
    0 42px 80px -42px rgb(14 32 52 / 0.36);
  isolation: isolate;
  max-width: min(28rem, calc(100% - 2rem));
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 1rem;
  /* Juste sous la rangée pastille « i » / badge TV de l'hôte, « un peu plus en haut »
     (porteur, 2026-09-03 13h25). */
  top: clamp(4.35rem, 7vh, 5.5rem);
  width: 28rem;
  z-index: 10;
}
.city-object-card[hidden] { display: none; }
.city-object-card::before {
  background:
    linear-gradient(90deg, var(--city-gold) 0 100%) 0 0 / 1.3rem 2px no-repeat,
    linear-gradient(180deg, var(--city-gold) 0 100%) 0 0 / 2px 1.3rem no-repeat,
    linear-gradient(90deg, var(--city-gold) 0 100%) 100% 0 / 1.3rem 2px no-repeat,
    linear-gradient(180deg, var(--city-gold) 0 100%) 100% 0 / 2px 1.3rem no-repeat,
    linear-gradient(90deg, var(--city-gold) 0 100%) 0 100% / 1.3rem 2px no-repeat,
    linear-gradient(180deg, var(--city-gold) 0 100%) 0 100% / 2px 1.3rem no-repeat,
    linear-gradient(90deg, var(--city-gold) 0 100%) 100% 100% / 1.3rem 2px no-repeat,
    linear-gradient(180deg, var(--city-gold) 0 100%) 100% 100% / 2px 1.3rem no-repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}
.city-object-card::after {
  background: linear-gradient(180deg, #e4c66e, var(--city-gold), #9d7926);
  content: "";
  inset: 0 0 0 auto;
  pointer-events: none;
  position: absolute;
  width: 3px;
  z-index: 2;
}
.city-object-header {
  align-items: baseline;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgb(201 168 78 / 0.075) 11px 12px),
    linear-gradient(150deg, #142f4b, #214665);
  color: #fffaf0;
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 3rem 0.78rem 1.15rem;
  position: relative;
}
.city-object-header::after {
  background: linear-gradient(90deg, var(--city-gold) 0 3.5rem, rgb(201 168 78 / 0.32) 3.5rem 62%, transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}
.city-object-body { padding: 1rem 1.2rem 1.15rem; position: relative; }
.city-object-body::before {
  background: linear-gradient(90deg, var(--city-gold), rgb(201 168 78 / 0.16));
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 0.75rem;
  width: 2.7rem;
}
.city-object-scan {
  animation: city-object-scan 820ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 both;
  background: linear-gradient(90deg, transparent, rgb(225 191 96 / 0.82) 32%, #e7ca78 50%, rgb(225 191 96 / 0.82) 68%, transparent);
  box-shadow: 0 0 0.8rem rgb(201 168 78 / 0.45);
  height: 2px;
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}
@keyframes city-object-enter {
  from { opacity: 0; transform: translateY(-0.5rem) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes city-object-scan {
  from { opacity: 0; transform: translateY(0); }
  14%, 82% { opacity: 1; }
  to { opacity: 0; transform: translateY(var(--city-object-height, 11rem)); }
}
.city-object-card h2, .city-object-card p { margin: 0; }
.city-object-header h2 {
  font-family: var(--pres-serif, serif);
  font-size: 1.34rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.14;
  min-width: 0;
  position: relative;
  text-wrap: balance;
}
.city-object-body p { color: var(--city-muted); font-size: 0.96rem; line-height: 1.58; text-wrap: pretty; }
.city-object-body .city-object-step { margin-top: .6rem; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-dark); }
.city-object-body .city-object-step:empty { display: none; }
.city-object-rank {
  align-items: center;
  background: rgb(201 168 78 / 0.14);
  border: 1px solid rgb(225 191 96 / 0.5);
  border-radius: 999px;
  color: #e7ca78;
  display: inline-flex;
  flex: none;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-height: 1.65rem;
  min-width: 1.65rem;
  padding: 0.16rem 0.48rem;
  place-content: center;
  position: relative;
}
.city-object-rank:empty { display: none; }
/* Le bouton de fermeture : une pastille, dans la langue des commandes de la cité (`.city-control`)
   — « un bouton stylé avec une icône », pas une croix nue (porteur, 2026-09-03 05h56). */
.city-object-close {
  align-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.96), transparent 38%),
    linear-gradient(145deg, rgb(255 255 252 / 0.94), rgb(239 228 208 / 0.88));
  border: 1px solid rgb(225 191 96 / 0.75);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.96),
    inset 0 -1px 0 rgb(114 83 24 / 0.08),
    0 2px 4px rgb(10 24 40 / 0.28);
  color: var(--city-ink);
  cursor: pointer;
  display: flex;
  height: 2rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  width: 2rem;
}
.city-object-close::after {
  border: 1px solid rgb(255 255 255 / 0.58);
  border-radius: inherit;
  content: "";
  inset: 2px;
  pointer-events: none;
  position: absolute;
}
.city-object-close:hover, .city-object-close:focus-visible {
  border-color: var(--city-gold);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.98), 0 2px 6px rgb(10 24 40 / 0.34), 0 0 0 3px rgb(201 168 78 / 0.18);
  color: var(--gold-dark);
  outline: none;
}
.city-object-close svg { fill: none; height: 1.05rem; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 1.05rem; position: relative; }
@media (prefers-reduced-motion: reduce) {
  .city-object-card, .city-object-scan { animation: none; }
  .city-object-scan { opacity: 0; }
}

/* ── les tags d'étape ──────────────────────────────────────────────────────────
   Des repères posés au-dessus des nœuds, comme sur une carte. Ils portent le numéro de
   l'ÉTAPE — où l'on en est dans le parcours — et non celui du rang sur l'axe de lecture.

   ILS SONT GRANDS, et c'est délibéré. Le porteur, deux fois : « les étiquettes et les numéros sur
   les étiquettes doivent être un peu plus grands et LISIBLES. » Un repère de carte qu'on doit
   approcher pour lire n'est pas un repère : c'est un détail. Ces tags sont le seul endroit où la
   cité dit à quelle étape on se trouve — s'ils ne se lisent pas d'un coup d'œil, le parcours
   entier redevient un décor. */

.tags {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem .3rem .3rem;
  border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 5px 18px -8px color-mix(in srgb, var(--navy) 65%, transparent);
  color: var(--navy);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background .18s, border-color .18s, box-shadow .18s, opacity .18s;
}

/* La pointe, sous le tag : elle désigne le nœud, comme une épingle. */
.tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1.5px;
  height: .7rem;
  background: color-mix(in srgb, var(--navy) 32%, transparent);
}

.tag-n {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tag-nom { padding-right: .15rem; }

/* Le niveau 0 n'est pas une étape : il n'y a rien à y faire, et ça se voit. */
.tag-niveau .tag-n {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--navy) 45%, transparent);
  color: color-mix(in srgb, var(--navy) 72%, transparent);
}

/* Loin, on ne garde que le numéro : vingt-sept libellés superposés ne se lisent pas. */
.tag-court { padding-right: .3rem; }
.tag-court .tag-nom { display: none; }

.tag-absent { opacity: 0; }

/* LE TAG EST UNE ÉTIQUETTE, PAS UN BOUTON.
   Il n'intercepte aucun geste : on désigne un objet en cliquant L'OBJET, et le tag s'illumine.
   Il a été cliquable, et c'était un défaut — agrandi comme le porteur l'a demandé, il couvrait une
   large part de la scène et AVALAIT LE GLISSEMENT : attraper la cité à cet endroit ne la poussait
   plus. Trouvé par `epreuve-navigation.mjs`, une fois cette épreuve rendue capable d'échouer. */

/* Le tag du nœud ouvert s'illumine, comme son sas. */
.tag-actif {
  border-color: var(--gold);
  background: var(--white);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent),
    0 6px 18px -8px color-mix(in srgb, var(--navy) 60%, transparent);
}

.tag-actif .tag-n { background: var(--gold-dark); }
.tag-actif .tag-nom { display: inline; }
.tag-actif::after { background: var(--gold); width: 2px; }

@media (max-width: 720px) {
  .tag .tag-nom { display: none; }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../../../../node_modules/.pnpm/@smatflow+city-v3@file+packages+smatflow-city-v3+web_@smatflow+architecture@file+packages+smatflow-architecture/node_modules/@smatflow/city-v3/src/montage/styles.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.smatflow-city-host,
.smatflow-city-tags {
  --smatflow-city-cream: #f0ebe3;
  --smatflow-city-white: #ffffff;
  --smatflow-city-navy: #1b3a5c;
  --smatflow-city-gold: #c9a84e;
  --smatflow-city-gold-dark: #8b6914;
}

.smatflow-city-host {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: layout paint style;
}

.smatflow-city-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.smatflow-city-canvas--survol {
  cursor: pointer;
}

.smatflow-city-tags {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.smatflow-city-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem .3rem .3rem;
  border: 1px solid color-mix(in srgb, var(--smatflow-city-navy) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--smatflow-city-white) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 5px 18px -8px color-mix(in srgb, var(--smatflow-city-navy) 65%, transparent);
  color: var(--smatflow-city-navy);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition:
    background .18s,
    border-color .18s,
    box-shadow .18s,
    filter .18s,
    opacity .18s;
}

.smatflow-city-tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1.5px;
  height: .7rem;
  background: color-mix(in srgb, var(--smatflow-city-navy) 32%, transparent);
}

.smatflow-city-tag__rang {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--smatflow-city-navy);
  color: var(--smatflow-city-cream);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.smatflow-city-tag__nom {
  padding-right: .15rem;
}

.smatflow-city-tag--niveau .smatflow-city-tag__rang {
  border: 1.5px solid color-mix(in srgb, var(--smatflow-city-navy) 45%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--smatflow-city-navy) 72%, transparent);
}

.smatflow-city-tag--court {
  gap: 0;
  padding: .2rem;
  background: color-mix(in srgb, var(--smatflow-city-white) 78%, transparent);
  border-color: color-mix(in srgb, var(--smatflow-city-navy) 15%, transparent);
  box-shadow: 0 4px 13px -8px color-mix(in srgb, var(--smatflow-city-navy) 58%, transparent);
  opacity: .9;
}

.smatflow-city-tag--court .smatflow-city-tag__nom {
  display: none;
}

.smatflow-city-tag--court .smatflow-city-tag__rang {
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .22rem;
  font-size: .84rem;
}

/* Une collision ne supprime jamais un nœud et ne déplace jamais son ancrage :
   la pastille concurrente reste visible, mais passe derrière la lecture principale. */
.smatflow-city-tag--dense {
  filter: saturate(.62);
  opacity: .46;
  z-index: 0;
}

.smatflow-city-tag--dense .smatflow-city-tag__rang {
  min-width: 1.28rem;
  height: 1.28rem;
  font-size: .7rem;
}

.smatflow-city-tag--absent {
  opacity: 0;
}

.smatflow-city-tag--actif {
  border-color: var(--smatflow-city-gold);
  background: var(--smatflow-city-white);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--smatflow-city-gold) 28%, transparent),
    0 6px 18px -8px color-mix(in srgb, var(--smatflow-city-navy) 60%, transparent);
}

.smatflow-city-tag--survol {
  border-color: color-mix(in srgb, var(--smatflow-city-gold) 72%, white);
  background: var(--smatflow-city-white);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--smatflow-city-gold) 20%, transparent),
    0 7px 20px -8px color-mix(in srgb, var(--smatflow-city-navy) 68%, transparent);
}

.smatflow-city-tag--actif,
.smatflow-city-tag--survol {
  filter: none;
  opacity: 1;
  z-index: 4;
}

.smatflow-city-tag--actif .smatflow-city-tag__rang {
  background: var(--smatflow-city-gold-dark);
}

.smatflow-city-tag--actif .smatflow-city-tag__nom,
.smatflow-city-tag--survol .smatflow-city-tag__nom {
  display: inline;
}

.smatflow-city-tag--actif::after {
  width: 2px;
  background: var(--smatflow-city-gold);
}

/* Quand une fiche est ciblée, les autres repères restent disponibles sans lutter
   avec elle. L'effet ne change ni leur DOM, ni leur hitbox Three.js. */
.smatflow-city-tag--secondaire:not(.smatflow-city-tag--survol) {
  filter: saturate(.55);
  opacity: .24;
}

@media (max-width: 720px) {
  .smatflow-city-tag .smatflow-city-tag__nom {
    display: none;
  }

  .smatflow-city-tag--actif .smatflow-city-tag__nom,
  .smatflow-city-tag--survol .smatflow-city-tag__nom {
    display: inline;
  }
}

/* Le retour caméra pendant un enregistrement (docs/10, porteur 2026-09-03 06h56) : en haut à
   gauche, en miroir, dans un cadre à crochets d'or — là où la caméra est dans le fichier. */
.smatflow-city-retour-camera {
  position: absolute;
  left: 1.5%;
  top: 1.5%;
  width: 22%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scaleX(-1);
  border-radius: 4%/5.33%;
  border: 1px solid rgb(201 168 78 / 0.7);
  box-shadow: 0 2px 4px rgb(23 47 74 / 0.18), 0 18px 40px -18px rgb(23 47 74 / 0.45);
  background: #102b47;
  pointer-events: none;
  z-index: 5;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   LE CHROME (montage/chrome.ts) — le bloc de titre sur son voile de lecture, la barre de
   commandes muettes. Une seule implémentation : la standalone et le site l'utilisent telle
   quelle, aucun ne la restyle (porteur, 2026-09-03 08h26). Tout est relatif à l'hôte
   (`.smatflow-city-host`, position: relative), qui est le viewport dans la standalone.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* Le DOUBLE TON du fond de décor (porteur, 2026-09-03 08h48) : un voile clair du haut vers rien,
   derrière le bloc de titre, qui se fond dans le gazon — la surface de lecture du titre. Sous les
   tags (z 2). */
.smatflow-city-host::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(14rem, 34vh, 22rem);
  background: linear-gradient(180deg, rgb(244 240 230 / 0.86) 0%, rgb(244 240 230 / 0.6) 50%, rgb(244 240 230 / 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.smatflow-city-host .chrome {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* Le bloc de titre de V1, rigoureusement : une ligne, un tiret, un texte en bas — centré, serif,
   et « encore plus imposant » (porteur, 2026-09-02 19h47). */
.smatflow-city-host .titre-bloc {
  top: clamp(1rem, 3.5vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 62rem);
  text-align: center;
  color: var(--smatflow-city-navy);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Le style TECHNO du site (porteur, 2026-09-03 08h43-08h44) : le titre navy détaché du gazon par un
   halo clair, sans voile ; le sous-titre en clair, porté par une ombre. */
.smatflow-city-host .titre-bloc h1 {
  margin: 0;
  font-family: 'Crimson Pro', 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--smatflow-city-navy);
  text-shadow:
    0 0 1px rgb(255 255 255 / .95),
    0 1px 0 rgb(255 255 255 / .85),
    0 0 12px rgb(255 255 255 / .7),
    0 0 28px rgb(255 255 255 / .45);
}

.smatflow-city-host .titre-bloc .tiret {
  display: block;
  width: 5rem;
  height: 3px;
  margin: .3rem auto .5rem;
  border-radius: 2px;
  background: var(--smatflow-city-gold);
}

/* « Plus lisible, pas gras, l'encre plus appuyée » (porteur, 2026-09-03 05h27) : l'encre navy
   pleine sur le voile clair, un halo léger. */
.smatflow-city-host .titre-bloc .sous {
  display: block;
  margin: 0 auto;
  max-width: 62ch;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .005em;
  color: var(--smatflow-city-navy);
  text-decoration: none;
  text-shadow: 0 0 1px rgb(255 255 255 / .6), 0 1px 12px rgb(255 255 255 / .4);
}

/* Le sous-titre-lien (le site) : même encre, même surface ; il reçoit le pointeur. */
.smatflow-city-host .titre-bloc a.sous {
  pointer-events: auto;
  cursor: pointer;
}

.smatflow-city-host .titre-bloc a.sous:hover,
.smatflow-city-host .titre-bloc a.sous:focus-visible {
  color: var(--smatflow-city-gold-dark);
  outline: none;
}

/* ── LES COMMANDES : icône muette + infobulle, jamais de texte (doctrine du 2026-06-12). ── */
.smatflow-city-host .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.smatflow-city-host .city-scene-toolbar > * {
  pointer-events: auto;
}

.smatflow-city-host .city-controls {
  align-items: center;
  bottom: clamp(3.25rem, 10vh, 5.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  left: clamp(0.75rem, 1.8vw, 1.75rem);
  position: absolute;
  z-index: 6;
}

.smatflow-city-host .city-controls fieldset {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.smatflow-city-host .city-control {
  -webkit-backdrop-filter: blur(14px) saturate(116%);
  align-items: center;
  backdrop-filter: blur(14px) saturate(116%);
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.96), transparent 38%),
    linear-gradient(145deg, rgb(255 255 252 / 0.92), rgb(239 228 208 / 0.86));
  border: 1px solid rgb(201 168 78 / 0.52);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.96),
    inset 0 -1px 0 rgb(114 83 24 / 0.08),
    0 2px 4px rgb(23 47 74 / 0.14),
    0 0.75rem 1.8rem -0.65rem rgb(23 47 74 / 0.28);
  color: var(--smatflow-city-navy);
  cursor: pointer;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
  width: 2.5rem;
}

.smatflow-city-host .city-control::after {
  border: 1px solid rgb(255 255 255 / 0.58);
  border-radius: inherit;
  content: "";
  inset: 3px;
  pointer-events: none;
  position: absolute;
}

.smatflow-city-host .city-control:hover {
  border-color: rgb(201 168 78 / 0.82);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.98), 0 2px 5px rgb(23 47 74 / 0.16), 0 0.9rem 2rem -0.6rem rgb(23 47 74 / 0.34), 0 0 0 3px rgb(201 168 78 / 0.09);
  transform: translateY(-1px);
}

.smatflow-city-host .city-control:active {
  transform: translateY(0) scale(0.97);
}

.smatflow-city-host .city-control:focus-visible {
  outline: 2px solid var(--smatflow-city-navy);
  outline-offset: 3px;
}

.smatflow-city-host .city-control[aria-pressed="true"] {
  background:
    radial-gradient(circle at 28% 18%, rgb(107 143 181 / 0.34), transparent 40%),
    linear-gradient(145deg, #214665, #102b47 72%);
  border-color: rgb(225 191 96 / 0.82);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -1px 0 rgb(0 10 24 / 0.34), 0 2px 5px rgb(23 47 74 / 0.22), 0 0.85rem 2rem -0.55rem rgb(23 47 74 / 0.5), 0 0 0 3px rgb(201 168 78 / 0.1);
  color: #fff8e8;
}

.smatflow-city-host .city-control[aria-pressed="true"]::after {
  border-color: rgb(225 191 96 / 0.2);
}

.smatflow-city-host .city-control:disabled {
  cursor: not-allowed;
  filter: saturate(45%);
  opacity: 0.46;
  transform: none;
}

/* ── LA PASTILLE « i » (porteur, 2026-09-03 10h08) : la sélection la rend disponible en haut à
   droite — à côté du badge TV que l'hôte y pose — ; elle ouvre la fiche à la demande. ── */
.smatflow-city-host .city-information-trigger {
  animation: smatflow-city-menu-enter 240ms cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 9;
}

.smatflow-city-host .city-information-trigger[hidden] {
  display: none;
}

.smatflow-city-host .city-information-trigger[aria-expanded="true"] {
  background:
    radial-gradient(circle at 28% 18%, rgb(107 143 181 / 0.34), transparent 40%),
    linear-gradient(145deg, #214665, #102b47 72%);
  border-color: rgb(225 191 96 / 0.82);
  color: #fff8e8;
}

/* ── L'ENREGISTREUR (docs/10) : la pastille, rouge quand elle enregistre, le chronomètre à côté,
   le menu d'icônes (micro barré, micro, caméra ; puis la pastille qui démarre). ── */
.smatflow-city-host .city-record {
  position: relative;
  display: flex;
  align-items: center;
}

.smatflow-city-host .city-control--record[aria-pressed="true"] {
  background:
    radial-gradient(circle at 28% 18%, rgb(255 190 170 / 0.5), transparent 42%),
    linear-gradient(145deg, #b3261e, #7a1410 72%);
  border-color: rgb(225 191 96 / 0.85);
  color: #fff4ee;
  animation: smatflow-city-record-pulse 1.6s ease-in-out infinite;
}

@keyframes smatflow-city-record-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 2px 5px rgb(23 47 74 / 0.22), 0 0 0 3px rgb(179 38 30 / 0.18); }
  50% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 2px 5px rgb(23 47 74 / 0.22), 0 0 0 7px rgb(179 38 30 / 0.06); }
}

.smatflow-city-host .city-record-chrono {
  position: absolute;
  left: calc(100% + .55rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .18rem .6rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #142f4b, #214665);
  border: 1px solid rgb(225 191 96 / 0.6);
  color: #fff8e8;
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgb(23 47 74 / 0.22);
}

.smatflow-city-host .city-record-chrono[hidden] {
  display: none;
}

.smatflow-city-host .city-record-chrono--longue {
  color: #d7bc76;
}

.smatflow-city-host .city-record-menu {
  position: absolute;
  left: calc(100% + .7rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .55rem;
  background:
    radial-gradient(110% 95% at 100% 100%, rgb(225 191 96 / 0.16), transparent 58%),
    linear-gradient(160deg, rgb(255 255 252 / 0.97), rgb(245 237 222 / 0.95));
  border: 1px solid color-mix(in srgb, var(--smatflow-city-gold) 58%, #fff8e8);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.94), 0 2px 4px rgb(23 47 74 / 0.14), 0 24px 56px -20px rgb(23 47 74 / 0.4);
  z-index: 11;
  animation: smatflow-city-menu-enter 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes smatflow-city-menu-enter {
  from { opacity: 0; transform: translateY(-50%) translateX(-0.3rem); }
  to { opacity: 1; transform: translateY(-50%); }
}

.smatflow-city-host .city-record-menu[hidden] {
  display: none;
}

.smatflow-city-host .city-record-menu__choix {
  display: flex;
  gap: .35rem;
}

.smatflow-city-host .city-record-menu__option {
  width: 2.15rem;
  height: 2.15rem;
}

.smatflow-city-host .city-record-menu__option[aria-checked="true"] {
  background:
    radial-gradient(circle at 28% 18%, rgb(107 143 181 / 0.34), transparent 40%),
    linear-gradient(145deg, #214665, #102b47 72%);
  border-color: rgb(225 191 96 / 0.82);
  color: #fff8e8;
}

.smatflow-city-host .city-record-menu__filet {
  width: 1px;
  height: 1.6rem;
  background: rgb(201 168 78 / 0.5);
}

.smatflow-city-host .city-record-menu__demarrer {
  width: 2.15rem;
  height: 2.15rem;
  color: #b3261e;
}

.smatflow-city-host .city-record-menu__demarrer:hover,
.smatflow-city-host .city-record-menu__demarrer:focus-visible {
  color: #7a1410;
}

@media (prefers-reduced-motion: reduce) {
  .smatflow-city-host .city-control { transition: none; }
  .smatflow-city-host .city-control:hover,
  .smatflow-city-host .city-control:active { transform: none; }
  .smatflow-city-host .city-record-menu { animation: none; }
}

/* ── LA FICHE D'UN OBJET : la carte d'objet du site (web-public `city-page.css`), copiée telle
   quelle — le composant ne réinvente pas son panneau. Seul écart : `position: fixed` (la
   standalone est plein écran) et la fiche s'ouvre sous le bloc de titre. ── */
.smatflow-city-host { --city-gold: var(--smatflow-city-gold); --pres-serif: 'Crimson Pro', 'Fraunces', Georgia, 'Times New Roman', serif; --city-ink: var(--smatflow-city-navy); --city-muted: color-mix(in srgb, var(--smatflow-city-navy) 62%, transparent); --gold-dark: var(--smatflow-city-gold-dark); --navy: var(--smatflow-city-navy); --gold-light: #e7ca78; }
.city-object-card {
  animation: city-object-enter 320ms cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(18px);
  background:
    radial-gradient(110% 95% at 100% 100%, rgb(225 191 96 / 0.16), transparent 58%),
    linear-gradient(160deg, rgb(255 255 252 / 0.97), rgb(245 237 222 / 0.95));
  border: 1px solid color-mix(in srgb, var(--city-gold) 58%, #fff8e8);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.94),
    0 2px 4px rgb(23 47 74 / 0.14),
    0 24px 56px -20px rgb(23 47 74 / 0.4),
    0 42px 80px -42px rgb(14 32 52 / 0.36);
  isolation: isolate;
  max-width: min(28rem, calc(100% - 2rem));
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 1rem;
  /* Juste sous la rangée pastille « i » / badge TV de l'hôte, « un peu plus en haut »
     (porteur, 2026-09-03 13h25). */
  top: clamp(4.35rem, 7vh, 5.5rem);
  width: 28rem;
  z-index: 10;
}
.city-object-card[hidden] { display: none; }
.city-object-card::before {
  background:
    linear-gradient(90deg, var(--city-gold) 0 100%) 0 0 / 1.3rem 2px no-repeat,
    linear-gradient(180deg, var(--city-gold) 0 100%) 0 0 / 2px 1.3rem no-repeat,
    linear-gradient(90deg, var(--city-gold) 0 100%) 100% 0 / 1.3rem 2px no-repeat,
    linear-gradient(180deg, var(--city-gold) 0 100%) 100% 0 / 2px 1.3rem no-repeat,
    linear-gradient(90deg, var(--city-gold) 0 100%) 0 100% / 1.3rem 2px no-repeat,
    linear-gradient(180deg, var(--city-gold) 0 100%) 0 100% / 2px 1.3rem no-repeat,
    linear-gradient(90deg, var(--city-gold) 0 100%) 100% 100% / 1.3rem 2px no-repeat,
    linear-gradient(180deg, var(--city-gold) 0 100%) 100% 100% / 2px 1.3rem no-repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}
.city-object-card::after {
  background: linear-gradient(180deg, #e4c66e, var(--city-gold), #9d7926);
  content: "";
  inset: 0 0 0 auto;
  pointer-events: none;
  position: absolute;
  width: 3px;
  z-index: 2;
}
.city-object-header {
  align-items: baseline;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgb(201 168 78 / 0.075) 11px 12px),
    linear-gradient(150deg, #142f4b, #214665);
  color: #fffaf0;
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 3rem 0.78rem 1.15rem;
  position: relative;
}
.city-object-header::after {
  background: linear-gradient(90deg, var(--city-gold) 0 3.5rem, rgb(201 168 78 / 0.32) 3.5rem 62%, transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}
.city-object-body { padding: 1rem 1.2rem 1.15rem; position: relative; }
.city-object-body::before {
  background: linear-gradient(90deg, var(--city-gold), rgb(201 168 78 / 0.16));
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 0.75rem;
  width: 2.7rem;
}
.city-object-scan {
  animation: city-object-scan 820ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 both;
  background: linear-gradient(90deg, transparent, rgb(225 191 96 / 0.82) 32%, #e7ca78 50%, rgb(225 191 96 / 0.82) 68%, transparent);
  box-shadow: 0 0 0.8rem rgb(201 168 78 / 0.45);
  height: 2px;
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}
@keyframes city-object-enter {
  from { opacity: 0; transform: translateY(-0.5rem) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes city-object-scan {
  from { opacity: 0; transform: translateY(0); }
  14%, 82% { opacity: 1; }
  to { opacity: 0; transform: translateY(var(--city-object-height, 11rem)); }
}
.city-object-card h2, .city-object-card p { margin: 0; }
.city-object-header h2 {
  font-family: var(--pres-serif, serif);
  font-size: 1.34rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.14;
  min-width: 0;
  position: relative;
  text-wrap: balance;
}
.city-object-body p { color: var(--city-muted); font-size: 0.96rem; line-height: 1.58; text-wrap: pretty; }
.city-object-body .city-object-step { margin-top: .6rem; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-dark); }
.city-object-body .city-object-step:empty { display: none; }
.city-object-rank {
  align-items: center;
  background: rgb(201 168 78 / 0.14);
  border: 1px solid rgb(225 191 96 / 0.5);
  border-radius: 999px;
  color: #e7ca78;
  display: inline-flex;
  flex: none;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-height: 1.65rem;
  min-width: 1.65rem;
  padding: 0.16rem 0.48rem;
  place-content: center;
  position: relative;
}
.city-object-rank:empty { display: none; }
/* Le bouton de fermeture : une pastille, dans la langue des commandes de la cité (`.city-control`)
   — « un bouton stylé avec une icône », pas une croix nue (porteur, 2026-09-03 05h56). */
.city-object-close {
  align-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.96), transparent 38%),
    linear-gradient(145deg, rgb(255 255 252 / 0.94), rgb(239 228 208 / 0.88));
  border: 1px solid rgb(225 191 96 / 0.75);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.96),
    inset 0 -1px 0 rgb(114 83 24 / 0.08),
    0 2px 4px rgb(10 24 40 / 0.28);
  color: var(--city-ink);
  cursor: pointer;
  display: flex;
  height: 2rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  width: 2rem;
}
.city-object-close::after {
  border: 1px solid rgb(255 255 255 / 0.58);
  border-radius: inherit;
  content: "";
  inset: 2px;
  pointer-events: none;
  position: absolute;
}
.city-object-close:hover, .city-object-close:focus-visible {
  border-color: var(--city-gold);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.98), 0 2px 6px rgb(10 24 40 / 0.34), 0 0 0 3px rgb(201 168 78 / 0.18);
  color: var(--gold-dark);
  outline: none;
}
.city-object-close svg { fill: none; height: 1.05rem; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 1.05rem; position: relative; }
@media (prefers-reduced-motion: reduce) {
  .city-object-card, .city-object-scan { animation: none; }
  .city-object-scan { opacity: 0; }
}

/* ── les tags d'étape ──────────────────────────────────────────────────────────
   Des repères posés au-dessus des nœuds, comme sur une carte. Ils portent le numéro de
   l'ÉTAPE — où l'on en est dans le parcours — et non celui du rang sur l'axe de lecture.

   ILS SONT GRANDS, et c'est délibéré. Le porteur, deux fois : « les étiquettes et les numéros sur
   les étiquettes doivent être un peu plus grands et LISIBLES. » Un repère de carte qu'on doit
   approcher pour lire n'est pas un repère : c'est un détail. Ces tags sont le seul endroit où la
   cité dit à quelle étape on se trouve — s'ils ne se lisent pas d'un coup d'œil, le parcours
   entier redevient un décor. */

.tags {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem .3rem .3rem;
  border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 5px 18px -8px color-mix(in srgb, var(--navy) 65%, transparent);
  color: var(--navy);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background .18s, border-color .18s, box-shadow .18s, opacity .18s;
}

/* La pointe, sous le tag : elle désigne le nœud, comme une épingle. */
.tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1.5px;
  height: .7rem;
  background: color-mix(in srgb, var(--navy) 32%, transparent);
}

.tag-n {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tag-nom { padding-right: .15rem; }

/* Le niveau 0 n'est pas une étape : il n'y a rien à y faire, et ça se voit. */
.tag-niveau .tag-n {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--navy) 45%, transparent);
  color: color-mix(in srgb, var(--navy) 72%, transparent);
}

/* Loin, on ne garde que le numéro : vingt-sept libellés superposés ne se lisent pas. */
.tag-court { padding-right: .3rem; }
.tag-court .tag-nom { display: none; }

.tag-absent { opacity: 0; }

/* LE TAG EST UNE ÉTIQUETTE, PAS UN BOUTON.
   Il n'intercepte aucun geste : on désigne un objet en cliquant L'OBJET, et le tag s'illumine.
   Il a été cliquable, et c'était un défaut — agrandi comme le porteur l'a demandé, il couvrait une
   large part de la scène et AVALAIT LE GLISSEMENT : attraper la cité à cet endroit ne la poussait
   plus. Trouvé par `epreuve-navigation.mjs`, une fois cette épreuve rendue capable d'échouer. */

/* Le tag du nœud ouvert s'illumine, comme son sas. */
.tag-actif {
  border-color: var(--gold);
  background: var(--white);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent),
    0 6px 18px -8px color-mix(in srgb, var(--navy) 60%, transparent);
}

.tag-actif .tag-n { background: var(--gold-dark); }
.tag-actif .tag-nom { display: inline; }
.tag-actif::after { background: var(--gold); width: 2px; }

@media (max-width: 720px) {
  .tag .tag-nom { display: none; }
}