/* ============================================================
   The Shapership Game — carte interactive à trois altitudes (v3)
   Fichier MANUEL (hors export Webflow). Chargé par le partial
   app/templates/partials/game-map.php sur la page du jeu.
   Altitudes : 01 la carte (3D) · 02 zoom 1, les 9 zones
   · 03 zoom 2, les points de vue (sections par légende + binômes).
   Le scroll traverse tout ; la 2→3 est un plongeon dans la carte.
   ============================================================ */

.section_game-map {
  background-color: var(--base-color-neutral--paper);
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

.section_game-map img {
  -webkit-user-drag: none;
  user-drag: none;
}

.gm_wrap {
  height: 520vh;
  position: relative;
}

.gm_stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
  gap: 2.5rem;
  align-items: center;
  padding: 3.6rem 4rem 3.4rem 5.5rem;
  overflow: hidden;
}

/* ---------- rail des altitudes (gauche) ---------- */
.gm_rail {
  position: absolute;
  left: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 8;
}

.gm_rail_item {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--base-color-brand--dark-blue);
}

.gm_rail_sep {
  width: 1px;
  height: 2.6rem;
  background-color: rgba(15, 41, 84, .25);
  margin-left: .34rem;
}

.gm_rail_carre {
  width: .7rem;
  height: .7rem;
  border: 1px solid var(--base-color-brand--dark-blue);
  background-color: transparent;
  transition: background-color .25s, border-color .25s;
  flex: none;
}

.gm_rail_item.is-on .gm_rail_carre {
  background-color: var(--base-color-brand--amber);
  border-color: var(--base-color-brand--amber);
}

.gm_rail_num {
  font-size: .72rem;
  letter-spacing: .08em;
  opacity: .55;
  transition: opacity .25s;
}

.gm_rail_item.is-on .gm_rail_num { opacity: 1; }

/* ---------- indice de scroll (bas de scène) ---------- */
.gm_hintbar {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--base-color-brand--shaper-blue);
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem;
  letter-spacing: .05em;
  z-index: 8;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  white-space: nowrap;
}

.gm_hintbar.is-on { opacity: 1; }

.gm_hint_arrow {
  display: inline-block;
  animation: gm-drop 1.8s ease-in-out infinite;
}

@keyframes gm-drop {
  0%, 100% { transform: translateY(-2px); opacity: .5; }
  50% { transform: translateY(3px); opacity: 1; }
}

/* ---------- scène 3D (altitudes 01 et 02) ---------- */
.gm_main {
  min-width: 0;
  transition: opacity .35s ease;
}

.gm_stage.is-l3 .gm_main {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease .25s; /* la carte reste visible pendant le plongeon */
}

.gm_scenewrap {
  perspective: 1500px;
  perspective-origin: 50% 32%;
}

.gm_float { will-change: transform; }

@keyframes gm-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.gm_stage.is-tilted .gm_float {
  animation: gm-breathe 7s ease-in-out infinite;
}

.gm_board {
  position: relative;
  aspect-ratio: 960 / 673;
  max-height: calc(100svh - 7.5rem);
  margin: 0 auto;
  transform-style: preserve-3d;
  will-change: transform;
  --tilt: 1;
  box-shadow:
    0 calc(20px + 42px * var(--tilt)) calc(40px + 50px * var(--tilt)) calc(-18px - 10px * var(--tilt)) rgba(12, 24, 50, calc(.22 + .2 * var(--tilt))),
    0 8px 22px -10px rgba(12, 24, 50, .2);
  background-color: #b8d8f8;
  border: 1px solid rgba(15, 41, 84, .3);
}

/* plongeon 2→3 : zoom continu dans la carte */
.gm_board.is-diving {
  transition: transform .75s cubic-bezier(.5, 0, .15, 1);
}

.gm_base {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transition: filter .5s ease, opacity .5s ease;
}

.gm_board.has-active .gm_base {
  filter: saturate(.25) brightness(1.05);
  opacity: .55;
}

.gm_overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gm_overlay .gm_lit { opacity: 0; transition: opacity .4s ease; }

.gm_board.has-active .gm_lit { opacity: 1; }

/* numéros de zones et noms de continents : vectoriels, nets à toute taille */
.gm_maplabels text {
  font-family: 'DM Sans', sans-serif;
  user-select: none;
}

.gm_num {
  font-size: 27px;
  font-weight: 700;
  fill: #fff;
  stroke: rgba(22, 32, 58, .5);
  stroke-width: 1.1;
  paint-order: stroke;
}

.gm_landname {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .14em;
  fill: #14213d;
}

.gm_landsub {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  fill: #2b3a5c;
}

.gm_zones-g .gm_shape {
  fill: #fff;
  fill-opacity: 0;
  stroke: transparent;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  cursor: pointer;
  pointer-events: all;
  transition: stroke .3s ease;
}

.gm_zone.is-active .gm_shape {
  stroke: var(--zc, var(--base-color-brand--dark-blue));
}

/* chips de noms de zones */
.gm_chip {
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: rgba(252, 251, 247, .95);
  border: 1px solid rgba(15, 41, 84, .35);
  border-left: 3px solid var(--zc, var(--base-color-brand--dark-blue));
  color: var(--base-color-brand--dark-blue);
  font-family: 'DM Sans', sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: .28rem .5rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 4;
  box-shadow: 0 4px 14px -6px rgba(12, 24, 50, .4);
}

.gm_chip.is-on { opacity: 1; }

/* ---------- colonne de droite (altitudes 01 et 02) ---------- */
.gm_side {
  position: relative;
  z-index: 6;
  min-width: 0;
  align-self: center;
  transition: opacity .35s ease;
}

.gm_stage.is-l3 .gm_side { opacity: 0; pointer-events: none; }

.gm_state {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%) translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}

.gm_state.is-on {
  position: relative;
  top: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease .1s, transform .45s ease .1s;
}

.gm_kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--base-color-brand--dark-blue);
  font-size: .8rem;
}

.gm_kicker_line {
  background-color: var(--base-color-brand--shaper-blue);
  width: 3rem;
  height: 1px;
  flex: none;
}

.gm_title {
  font-family: 'DM Sans', sans-serif;
  color: var(--base-color-brand--dark-blue);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 1.1rem 0 0;
}

.gm_title em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--base-color-brand--shaper-blue);
  font-weight: 600;
}

.gm_lead {
  color: var(--base-color-brand--dark-blue);
  font-size: .92rem;
  line-height: 1.55;
  margin: .9rem 0 0;
  max-width: 36ch;
}

/* définitions MAD / NO-MAD (altitude 01) */
.gm_defs {
  margin-top: 1.3rem;
  border: 1px solid rgba(15, 41, 84, .22);
  background-color: var(--base-color-neutral--cream);
  padding: .9rem 1rem;
  position: relative;
}

.gm_defs::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1rem;
  height: 1rem;
  border-top: 1px solid var(--base-color-brand--dark-blue);
  border-left: 1px solid var(--base-color-brand--dark-blue);
}

.gm_def + .gm_def { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(15, 41, 84, .14); }

.gm_def_tag {
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--base-color-brand--dark-blue);
}

.gm_def_text { color: var(--base-color-brand--dark-blue); font-size: .85rem; line-height: 1.45; margin-top: .2rem; }

.gm_def.is-nomad .gm_def_text { font-family: 'Playfair Display', serif; font-style: italic; color: var(--base-color-brand--shaper-blue); font-size: .95rem; }

/* sélecteur 3 × 3 */
.gm_grid {
  display: grid;
  grid-template-columns: repeat(3, 3.2rem);
  gap: .45rem;
  margin-top: 1.2rem;
}

.gm_cell {
  aspect-ratio: 1;
  border: 1px solid rgba(15, 41, 84, .18);
  background-color: var(--zc);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}

.gm_cell.is-light { color: var(--base-color-brand--dark-blue); }

.gm_cell:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(12, 24, 50, .45); }

.gm_cell.is-selected {
  outline: 2px solid var(--base-color-brand--dark-blue);
  outline-offset: 2px;
}

/* carte de paire (altitude 02) */
.gm_pair {
  margin-top: 1.3rem;
  border: 1px solid rgba(15, 41, 84, .22);
  background-color: var(--base-color-neutral--cream);
  padding: .95rem 1.05rem;
  position: relative;
  min-height: 8.4rem;
}

.gm_pair::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1rem;
  height: 1rem;
  border-top: 1px solid var(--base-color-brand--dark-blue);
  border-left: 1px solid var(--base-color-brand--dark-blue);
}

.gm_pair_placeholder {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--base-color-brand--shaper-blue);
  font-size: .98rem;
  line-height: 1.5;
}

.gm_pair_row { display: none; }

.gm_pair.has-zone .gm_pair_placeholder { display: none; }

.gm_pair.has-zone .gm_pair_row { display: block; }

.gm_pair_shift { display: none; }

.gm_pair.has-zone .gm_pair_shift { display: flex; align-items: center; gap: .55rem; margin: .55rem 0; }

.gm_pair_tag {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--base-color-neutral--neutral-darker);
}

.gm_pair_name {
  font-family: 'DM Sans', sans-serif;
  color: var(--base-color-brand--dark-blue);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: .15rem;
}

.gm_pair_row.is-nomad .gm_pair_name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--base-color-brand--shaper-blue);
  font-size: 1.12rem;
}

.gm_pair_shift .line { flex: 1; height: 1px; background-color: rgba(15, 41, 84, .22); }

.gm_pair_shift .word {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .78rem;
  color: var(--base-color-brand--amber);
  white-space: nowrap;
}

.gm_actions { display: flex; gap: .7rem; margin-top: 1.2rem; flex-wrap: wrap; }

.gm_btn {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .65rem 1.1rem;
  border: 1px solid var(--base-color-brand--dark-blue);
  background-color: var(--base-color-brand--dark-blue);
  color: var(--base-color-brand--clear-blue);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.gm_btn:hover { background-color: var(--base-color-brand--shaper-blue); border-color: var(--base-color-brand--shaper-blue); }

.gm_btn.is-amber { background-color: var(--base-color-brand--amber); border-color: var(--base-color-brand--amber); color: #fff; }

.gm_btn.is-amber:hover { background-color: #b3762f; border-color: #b3762f; }

/* ============================================================
   Altitude 03 — zoom 2 : les points de vue.
   Sections par légende (jamais la pièce entière) + binômes
   d'images toujours entières, côte à côte. Aucun texte sur image.
   ============================================================ */
.gm_l3 {
  position: absolute;
  inset: 0;
  z-index: 7;
  padding: 2.4rem 4rem 1.4rem 5.5rem;
  display: grid;
  /* deux colonnes de cartes au même format, dimensionnées par la hauteur
     d'écran et resserrées au centre : la composition occupe l'espace */
  --gmcard: calc((100svh - 248px) * .85);
  grid-template-columns: repeat(2, minmax(0, var(--gmcard)));
  grid-template-rows: auto auto auto auto;
  align-content: center;
  justify-content: center;
  gap: 1.05rem 2.4rem;
  background-color: var(--base-color-neutral--paper);
  opacity: 0;
  visibility: hidden;
  transform: scale(.955);
  transition: opacity .45s ease, transform .5s ease, visibility 0s linear .5s;
}

.gm_stage.is-l3 .gm_l3 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity .5s ease .22s, transform .6s cubic-bezier(.25, .8, .3, 1) .18s;
}

.gm_l3_head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}

.gm_l3_head .gm_title { font-size: 1.5rem; margin-top: .5rem; }

.gm_l3_lead {
  color: var(--base-color-brand--dark-blue);
  font-size: .78rem;
  line-height: 1.45;
  margin: .45rem 0 0;
  max-width: 58ch;
}

.gm_l3_nav { display: flex; align-items: center; gap: .8rem; flex: none; }

.gm_strip { display: flex; gap: .32rem; }

.gm_mini {
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(15, 41, 84, .18);
  background-color: var(--zc);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease;
}

.gm_mini.is-light { color: var(--base-color-brand--dark-blue); }

.gm_mini:hover { transform: translateY(-2px); }

.gm_mini.is-selected { outline: 2px solid var(--base-color-brand--dark-blue); outline-offset: 1px; }

.gm_arrows { display: flex; align-items: center; gap: .3rem; font-family: 'DM Sans', sans-serif; font-size: .72rem; color: var(--base-color-brand--dark-blue); }

.gm_arrow {
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--base-color-brand--dark-blue);
  background: transparent;
  color: var(--base-color-brand--dark-blue);
  font-size: .95rem;
  cursor: pointer;
  padding: 0;
  transition: background-color .2s;
}

.gm_arrow:hover { background-color: rgba(15, 41, 84, .08); }

.gm_arrows[hidden] { display: none; }

/* blocs cartes : mêmes largeur et format que les images des binômes,
   sans étiquette (le nom du lieu vit sous l'image d'artiste). */
.gm_paneblock {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.gm_pane {
  position: relative;
  flex: none;
  aspect-ratio: 1456 / 816;
  overflow: hidden;
  border: 1px solid rgba(15, 41, 84, .3);
  background-color: #b8d8f8;
  min-height: 0;
}

.gm_crop { position: absolute; will-change: transform; }

.gm_crop_img { display: block; width: 100%; height: 100%; pointer-events: none; }

.gm_veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* marqueur de la légende mise en avant (non interactif, bien animé) */
.gm_marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--base-color-brand--amber);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(12, 24, 50, .45);
  pointer-events: none;
  z-index: 3;
}

.gm_marker::before,
.gm_marker::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--base-color-brand--amber);
  animation: gm-pulse 2s ease-out infinite;
}

.gm_marker::after { animation-delay: 1s; }

@keyframes gm-pulse {
  0% { transform: scale(.55); opacity: .95; }
  70% { opacity: .25; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* binômes : images toujours ENTIÈRES (ratio exact), légende SOUS l'image.
   Largeur bornée pour laisser la place aux cartes au-dessus. */
.gm_biblock {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
  width: 100%;
}

.gm_bi_imgbox {
  aspect-ratio: 1456 / 816;
  overflow: hidden;
  border: 1px solid rgba(15, 41, 84, .3);
  background-color: var(--base-color-neutral--neutral-light);
}

.gm_bi_imgbox img { display: block; width: 100%; height: 100%; }

.gm_bi_cap {
  display: flex;
  align-items: baseline;
  gap: 1.05rem;
  min-height: 1.3rem;
  border-left: 3px solid var(--base-color-brand--dark-blue);
  padding-left: .7rem;
}

.gm_biblock.is-nomad .gm_bi_cap { border-left-color: var(--base-color-brand--shaper-blue); }

.gm_bi_cap .tag {
  font-family: 'DM Sans', sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--base-color-neutral--neutral-darker);
  white-space: nowrap;
}

.gm_bi_cap .name {
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: var(--base-color-brand--dark-blue);
  line-height: 1.25;
}

/* même police, même couleur, même style des deux côtés (demande d'Aline) */

.gm_l3_foot {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--base-color-brand--dark-blue);
  font-size: .92rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(15, 41, 84, .14);
}

.gm_l3_foot .up { margin-left: 1.6rem; }

.gm_linkbtn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  color: var(--base-color-brand--shaper-blue);
  border-bottom: 1px solid transparent;
}

.gm_linkbtn:hover { border-bottom-color: var(--base-color-brand--shaper-blue); }

/* mode édition (?edit=1) */
.gm_editflag {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 20;
  background-color: var(--base-color-brand--amber);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .25rem .55rem;
}

/* ---------- écrans peu hauts (portables 720-840px) ---------- */
@media (min-width: 992px) and (max-height: 840px) {
  .gm_stage { padding-top: 2.8rem; padding-bottom: 2rem; }
  .gm_board { max-height: calc(100svh - 5.5rem); }
  .gm_title { font-size: 1.45rem; margin-top: .8rem; }
  .gm_lead { font-size: .84rem; margin-top: .55rem; }
  .gm_defs { margin-top: .9rem; padding: .7rem .8rem; }
  .gm_def_text { font-size: .8rem; }
  .gm_grid { grid-template-columns: repeat(3, 2.7rem); gap: .38rem; margin-top: .9rem; }
  .gm_cell { font-size: .88rem; }
  .gm_pair { margin-top: .9rem; padding: .7rem .8rem; min-height: 7.6rem; }
  .gm_pair_name { font-size: .9rem; }
  .gm_pair_row.is-nomad .gm_pair_name { font-size: 1rem; }
  .gm_actions { margin-top: .9rem; }
  .gm_btn { padding: .55rem .95rem; font-size: .78rem; }
  .gm_l3 { padding: 1.8rem 2.6rem 1rem 4.4rem; gap: .7rem 1.9rem; --gmcard: calc((100svh - 212px) * .85); }
  .gm_l3_head { margin-bottom: .55rem; }
  .gm_l3_head .gm_title { font-size: 1.25rem; }
  .gm_l3_lead { display: none; }
  .gm_l3_foot { font-size: .8rem; margin-top: .3rem; padding-top: .6rem; }
  .gm_bi_cap .name { font-size: .84rem; }
}

/* ---------- mobile ---------- */
@media (max-width: 991px) {
  .gm_wrap { height: auto; }
  .gm_stage {
    position: relative;
    height: auto;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 3rem 1.25rem 3rem;
    overflow: visible;
  }
  .gm_rail, .gm_hintbar { display: none; }
  .gm_board { max-height: none; --tilt: .35; }
  .gm_stage.is-tilted .gm_float { animation: none; }
  .gm_stage.is-l3 .gm_main,
  .gm_stage.is-l3 .gm_side { opacity: 1; pointer-events: auto; }
  .gm_side { align-self: start; }
  .gm_state { position: absolute; }
  .gm_state.is-on { position: relative; }
  .gm_title { font-size: 1.6rem; }
  /* altitude 03 en flux, toujours visible : le scroll y arrive naturellement */
  .gm_l3 {
    position: relative;
    inset: auto;
    z-index: 1;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: .8rem .7rem;
  }
  .gm_l3_head { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: .9rem; }
  .gm_l3_lead { font-size: .82rem; }
  .gm_paneblock { grid-column: 1 / -1; max-width: none; }
  .gm_l3_foot { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .gm_stage.is-tilted .gm_float,
  .gm_hint_arrow,
  .gm_marker::after { animation: none; }
  .gm_board, .gm_base, .gm_l3, .gm_state, .gm_lit, .gm_main, .gm_side { transition: none; }
}