/* ==========================================================================
   Cartable Malin — « Tour de France » (géographie)
   Toutes les classes sont préfixées « geo- ».
   ========================================================================== */

/* ---------- Écran de jeu : carte + panneau ---------- */
/* En paysage, le jeu occupe exactement la hauteur de l'écran (pas de défilement). */
.game-host.game-geo { height: 100%; }
.geo-play {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 31vw, 392px);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
}
.geo-mapzone {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.geo-mapzone.is-static { pointer-events: none; }
.geo-map {
  position: relative;
  flex: 0 0 auto;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: #5ec2ee;
  box-shadow: 0 var(--lift) 0 var(--ink);
}
.geo-svg { display: block; width: 100%; height: 100%; touch-action: none; }

/* Boutons de zoom : en bas à gauche (sur l'océan et l'Espagne) */
.geo-zoom {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.geo-zoom .geo-zbtn { min-width: 56px; min-height: 56px; font-size: 28px; border-width: 3px; --lift: 4px; background: rgba(255,253,245,.92); }
.geo-zbtn--reset { display: none; }
.is-zoomed .geo-zbtn--reset { display: inline-flex; }

/* ---------- La carte ---------- */
.geo-svg { --geo-sw: 1; }
.geo-sea-bg { fill: #5ec2ee; }
.geo-waves { pointer-events: none; }
.geo-sea {
  fill: #5ec2ee;
  stroke: rgba(255,255,255,.9);
  stroke-width: calc(2px * var(--geo-sw));
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
  transition: fill .2s;
}
.geo-halo path {
  fill: #fff;
  stroke: rgba(255,255,255,.55);
  stroke-width: calc(9px * var(--geo-sw));
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill-rule: evenodd;
}
.geo-land path { fill-rule: evenodd; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .2s; }
.geo-ctx { fill: #e7e2d6; stroke: #b9b0a0; stroke-width: calc(1.2px * var(--geo-sw)); }
.geo-country { stroke: var(--ink); stroke-width: calc(1.6px * var(--geo-sw)); }
.geo-c-BE { fill: #ffb8cf; }
.geo-c-LU { fill: #cdb9ff; }
.geo-c-DE { fill: #a6e8c4; }
.geo-c-CH { fill: #ffa79a; }
.geo-c-IT { fill: #d6f29a; }
.geo-c-ES { fill: #ffd3a6; }
.geo-c-AD { fill: #b9a6ff; }
.geo-c-MC { fill: #ff8fab; }
.geo-france { fill: #ffb547; }
.geo-france-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: calc(3px * var(--geo-sw));
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
/* Régions (visibles seulement dans le thème Régions) */
.geo-regions { display: none; }
.v-regions .geo-regions { display: inline; }
.geo-region { stroke: #fffdf5; stroke-width: calc(2px * var(--geo-sw)); stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .2s; }
.geo-rc-a { fill: #ffb8cf; }
.geo-rc-b { fill: #a6e8c4; }
.geo-rc-c { fill: #cdb9ff; }
.geo-rc-d { fill: #ffcfa0; }
.geo-rc-e { fill: #fff09a; }
/* Montagnes */
.geo-mountains { display: none; }
.v-montagnes .geo-mountains, .v-quiz .geo-mountains { display: inline; }
.v-quiz:not(.v-montagnes) .geo-mountain { opacity: .5; }
.geo-mountain { stroke: #7a4a22; stroke-width: calc(1.6px * var(--geo-sw)); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Lacs */
.geo-lake { fill: #5ec2ee; stroke: #1d6fd1; stroke-width: calc(1.4px * var(--geo-sw)); vector-effect: non-scaling-stroke; }
/* Fleuves et rivières */
.geo-rivers { display: none; }
.v-fleuves .geo-rivers, .v-villes .geo-rivers, .v-quiz .geo-rivers { display: inline; }
.v-villes:not(.v-fleuves) .geo-rv, .v-quiz:not(.v-fleuves) .geo-rv { opacity: .55; }
.v-villes:not(.v-fleuves) .geo-rv--ctx, .v-quiz:not(.v-fleuves) .geo-rv--ctx,
.geo-rv--foreign { display: none; }
.v-fleuves .geo-rv--foreign { display: inline; }
.geo-rv path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.geo-rv-case { stroke: #fffdf5; stroke-width: calc(6.5px * var(--geo-sw)); }
.geo-rv-line { stroke: #1f7fe0; stroke-width: calc(3.2px * var(--geo-sw)); transition: stroke .2s; }
.geo-rv--big .geo-rv-line { stroke-width: calc(4px * var(--geo-sw)); }
.geo-rv--big .geo-rv-case { stroke-width: calc(7.5px * var(--geo-sw)); }
.geo-rv--ctx .geo-rv-line { stroke: #4f9fe8; stroke-width: calc(2.2px * var(--geo-sw)); }
.geo-rv--ctx .geo-rv-case { stroke-width: calc(4.5px * var(--geo-sw)); stroke: rgba(255,253,245,.8); }
.geo-rv--foreign .geo-rv-line { stroke: #6aaee8; stroke-width: calc(1.8px * var(--geo-sw)); }
.geo-rv--foreign .geo-rv-case { display: none; }
/* Points : villes, sommet, petits pays */
.geo-pt { pointer-events: none; }
.geo-city, .geo-peak, .geo-mark { display: none; }
.v-villes .geo-city, .v-quiz .geo-city { display: inline; }
.v-montagnes .geo-peak, .v-quiz .geo-peak { display: inline; }
.v-pays .geo-mark, .v-quiz .geo-mark { display: inline; }
.geo-city-dot { fill: var(--tomato); stroke: var(--ink); stroke-width: 2.6px; transition: fill .2s, transform .2s; }
.geo-city-core { fill: #fffdf5; }
.geo-peak-body { fill: #a77b58; stroke: var(--ink); stroke-width: 2.4px; stroke-linejoin: round; }
.geo-peak-snow { fill: #fff; }
.geo-mark-hit { fill: rgba(255,255,255,.28); stroke: var(--ink); stroke-width: 1.6px; stroke-dasharray: 3 3; }
.geo-mark-dot { stroke: var(--ink); stroke-width: 2.6px; }
.geo-mark.geo-c-MC .geo-mark-dot { fill: #ff8fab; }
.geo-mark.geo-c-AD .geo-mark-dot { fill: #b9a6ff; }

/* Étiquettes : affichées en « Découvrir », masquées pendant les questions */
.geo-lab { display: none; pointer-events: none; }
.geo-lab.is-on { display: inline; }
.geo-lab text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  fill: var(--ink);
  stroke: #fffdf5;
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.geo-lab--pays text { font-size: 16px; }
.geo-lab--france text { font-size: 30px; letter-spacing: 7px; fill: rgba(122, 63, 10, .38); stroke: none; }
.geo-lab--ctx text { font-size: 13px; fill: #857c6c; font-style: italic; }
.geo-lab--mer text { font-size: 15px; font-style: italic; fill: #0b4f8a; stroke: rgba(255,255,255,.9); }
.geo-lab--eau text { font-size: 14px; font-style: italic; fill: #0b5fc0; }
.geo-lab--mont text { font-size: 15px; fill: #5a3410; stroke: #fff3dc; }
.geo-lab--ville text { font-size: 14px; }
.geo-lab--region text { font-size: 12.5px; }
.geo-lab.is-seen text { fill: #137a35; }
.geo-lab.is-ok text { fill: #137a35; }
.geo-lab.is-miss text, .geo-lab.is-tmp text { fill: #c2341f; }
.geo-lab.is-sticker text { stroke: none; fill: var(--ink); }
.geo-sticker-bg { fill: #c9f5d6; stroke: var(--ink); stroke-width: 2.2px; }
.geo-lab--france.is-on { display: inline; }

/* ---------- États : allumé / trouvé / raté / à trouver / erreur ---------- */
.geo-land path.is-lit, .geo-region.is-lit { fill: #fff36b; }
.geo-sea.is-lit { fill: #b8efff; }
.geo-land path.is-ok, .geo-region.is-ok { fill: #6fdc8f; }
.geo-sea.is-ok { fill: #9eeed2; }
.geo-land path.is-miss, .geo-region.is-miss { fill: #ffb6aa; }
.geo-sea.is-miss { fill: #ffd2c9; }
.geo-land path.is-target, .geo-region.is-target, .geo-sea.is-target { animation: geo-blink .55s ease-in-out infinite alternate; stroke: var(--ink); stroke-width: calc(3.5px * var(--geo-sw)); }
.geo-land path.is-bad, .geo-region.is-bad, .geo-sea.is-bad { animation: geo-bad .3s ease 3; }
.geo-mountain.is-lit { stroke: #ffd23f; stroke-width: calc(5px * var(--geo-sw)); }
.geo-mountain.is-ok { stroke: #2fb35a; stroke-width: calc(5px * var(--geo-sw)); }
.geo-mountain.is-miss { stroke: #ff5e57; stroke-width: calc(4px * var(--geo-sw)); }
.geo-mountain.is-target { animation: geo-blink-stroke .55s ease-in-out infinite alternate; stroke-width: calc(6px * var(--geo-sw)); opacity: 1 !important; }
.geo-mountain.is-bad { animation: geo-bad-stroke .3s ease 3; stroke-width: calc(5px * var(--geo-sw)); }
.geo-lake.is-lit { fill: #fff36b; }
.geo-lake.is-ok { fill: #8be6a6; }
.geo-lake.is-target { animation: geo-blink .55s ease-in-out infinite alternate; }
.geo-rv.is-lit .geo-rv-line { stroke: #ffb000; }
.geo-rv.is-lit .geo-rv-case, .geo-rv.is-target .geo-rv-case { stroke: var(--ink); }
.geo-rv.is-ok .geo-rv-line { stroke: #22b14c; }
.geo-rv.is-ok .geo-rv-case { stroke: #e9ffe9; }
.geo-rv.is-miss .geo-rv-line { stroke: #ff5e57; }
.geo-rv.is-target { opacity: 1 !important; }
.geo-rv.is-target .geo-rv-line { animation: geo-blink-stroke .55s ease-in-out infinite alternate; stroke-width: calc(5px * var(--geo-sw)); }
.geo-rv.is-target .geo-rv-case { stroke-width: calc(9px * var(--geo-sw)); }
.geo-rv.is-bad .geo-rv-line { animation: geo-bad-stroke .3s ease 3; }
.geo-rv.is-lit, .geo-rv.is-ok, .geo-rv.is-target, .geo-rv.is-bad, .geo-rv.is-miss { display: inline !important; opacity: 1; }
.geo-pt.is-lit .geo-city-dot, .geo-pt.is-lit .geo-mark-dot, .geo-pt.is-lit .geo-peak-body { fill: #fff36b; transform: scale(1.3); }
.geo-pt.is-ok .geo-city-dot, .geo-pt.is-ok .geo-mark-dot, .geo-pt.is-ok .geo-peak-body { fill: #3fc26b; }
.geo-pt.is-miss .geo-city-dot, .geo-pt.is-miss .geo-mark-dot, .geo-pt.is-miss .geo-peak-body { fill: #ffb6aa; }
.geo-pt.is-target .geo-city-dot, .geo-pt.is-target .geo-mark-dot, .geo-pt.is-target .geo-peak-body { animation: geo-blink .55s ease-in-out infinite alternate; transform: scale(1.25); }
.geo-pt.is-bad .geo-city-dot, .geo-pt.is-bad .geo-mark-dot, .geo-pt.is-bad .geo-peak-body { animation: geo-bad .3s ease 3; }
.geo-ring circle { fill: none; stroke: #ffd23f; stroke-width: 4px; animation: geo-ring 1.1s ease-out infinite; }
.geo-ripple {
  fill: rgba(255,255,255,.45);
  stroke: #fff;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: geo-ripple .5s ease-out forwards;
  pointer-events: none;
}
@keyframes geo-blink { from { fill: #fff36b; } to { fill: #fffdf5; } }
@keyframes geo-blink-stroke { from { stroke: #ffd23f; } to { stroke: #ff5e57; } }
@keyframes geo-bad { 50% { fill: #ff5e57; } }
@keyframes geo-bad-stroke { 50% { stroke: #ff5e57; } }
@keyframes geo-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes geo-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ---------- Panneau des questions ---------- */
.geo-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
}
.geo-panel__top { display: flex; align-items: center; gap: 8px; }
.geo-panel__title { flex: 1 1 0; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-back { min-height: 56px; }
.geo-pill { flex: 0 0 auto; min-height: 40px; font-size: 18px; padding: 2px 10px; box-shadow: 0 3px 0 var(--ink); }
.geo-pill:empty { display: none; }
.geo-pill--score { background: var(--sun); }
.geo-ask .owl-wrap { align-items: flex-end; gap: 6px; }
.geo-ask .bubble { margin-bottom: 14px; max-width: none; flex: 1 1 auto; min-width: 0; font-size: clamp(17px, .6vw + 12px, 21px); }
.geo-main { display: flex; flex-direction: column; gap: 12px; }
.geo-note { font-family: var(--font-display); font-weight: 800; color: var(--ink-soft); font-size: 17px; }
.geo-note:empty { display: none; }

/* Carte « question » sur feuille Séyès */
.geo-q {
  --margin: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 52px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink);
}
.geo-q__text { flex: 1 1 auto; min-width: 0; }
.geo-q__lead { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink-soft); line-height: 1; }
.geo-q__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 1.6vw + 14px, 38px); line-height: 1.1; overflow-wrap: anywhere; }
.geo-q__name--small { font-size: clamp(19px, .7vw + 13px, 24px); line-height: 1.2; }
.geo-q__name.is-pop { animation: pop .3s ease; }
.geo-play--find .geo-q__name { font-size: clamp(26px, 2.2vw + 12px, 44px); }
.geo-q__say { flex: 0 0 auto; }
.geo-streak { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--tomato); min-height: 0; }
.geo-streak:empty { display: none; }

/* Boutons de réponse */
.geo-answers { display: grid; gap: 10px; }
.geo-answers--grid { grid-template-columns: 1fr 1fr; }
.geo-answer { width: 100%; min-height: 64px; padding: 8px 14px; font-size: clamp(18px, .5vw + 14px, 22px); line-height: 1.15; }
.geo-answers--grid .geo-answer { font-size: clamp(16px, .4vw + 13px, 20px); padding: 8px 10px; }
.geo-answer.is-good { --c: var(--grass); color: var(--paper); text-shadow: 0 2px 0 rgba(35,26,74,.35); }
.geo-answer.is-bad { --c: var(--tomato); color: var(--paper); text-shadow: 0 2px 0 rgba(35,26,74,.35); animation: shake .4s ease; }
.geo-answer[disabled].is-good, .geo-answer[disabled].is-bad { filter: none; }
.geo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.geo-actions:empty { display: none; }
.geo-actions .btn { flex: 1 1 auto; }

/* Découvrir : liste des noms */
.geo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.geo-item {
  appearance: none;
  min-height: 56px;
  padding: 6px 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.geo-item:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.geo-item.is-seen { background: #c9f5d6; }
.geo-item.is-seen::after { content: " ✓"; color: #137a35; }

/* Étiquettes à glisser */
.geo-chrono-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; }
.geo-chrono { font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.geo-errs { margin-left: auto; font-size: 20px; color: var(--tomato); }
.geo-tray { display: flex; flex-wrap: wrap; gap: 10px; min-height: 64px; align-content: flex-start; }
.geo-label-chip {
  appearance: none;
  min-height: 56px;
  padding: 6px 16px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  box-shadow: 0 4px 0 var(--ink);
  cursor: grab;
  touch-action: none;
  animation: pop .3s ease;
}
.geo-label-chip.is-selected { background: var(--sun); transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.geo-label-chip.is-ghost { opacity: .25; }
.geo-float {
  position: fixed;
  z-index: 70;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 10px)) rotate(-3deg);
  padding: 8px 16px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--sun);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 6px 0 var(--ink);
  pointer-events: none;
}
.geo-float::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: var(--sun);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}
.geo-float.is-back { transition: left .4s cubic-bezier(.3,1.5,.5,1), top .4s cubic-bezier(.3,1.5,.5,1); }
.geo-float.is-snap { transition: left .22s ease, top .22s ease; background: var(--grass); color: var(--paper); }
.geo-float.is-snap::after { background: var(--grass); }

/* ---------- Menu du jeu ---------- */
.geo-menu {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 540px);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
}
.geo-menu__map { min-height: 0; min-width: 0; display: flex; }
.geo-menu__map .geo-mapzone { flex: 1 1 auto; align-items: flex-start; }
.geo-menu__side { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; overflow-y: auto; padding-bottom: 8px; }
.geo-menu__hello .bubble { margin-bottom: 18px; max-width: none; font-size: clamp(17px, .6vw + 12px, 21px); }
.geo-menu__block { display: grid; gap: 8px; }
.geo-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.geo-chip { min-height: 56px; font-size: 17px; padding: 6px 12px; }
.geo-chip[aria-pressed="true"] { background: var(--grass); color: var(--paper); text-shadow: 0 2px 0 rgba(35,26,74,.35); }
.geo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 12px; }
.geo-menu--ce1 .geo-tiles { grid-template-columns: 1fr 1fr; }
.geo-tile {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 10px 12px;
  text-align: left;
  border: var(--stroke) solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 var(--lift) 0 var(--ink);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.geo-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.geo-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.geo-tile__emoji {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--sun);
  transform: rotate(-4deg);
}
.geo-tile--find .geo-tile__emoji { background: #9fe6b4; }
.geo-tile--name .geo-tile__emoji { background: #ffb8cf; }
.geo-tile--labels .geo-tile__emoji { background: #cdb9ff; }
.geo-tile--quiz .geo-tile__emoji { background: #9edcff; }
.geo-tile__body { display: grid; gap: 2px; min-width: 0; }
.geo-tile__name { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.05; }
.geo-tile__desc { font-size: 15px; line-height: 1.2; color: var(--ink-soft); }
/* Meilleur score : petit badge à cheval sur le bord haut ; la tuile descend son contenu pour qu'il ne cache pas le titre. */
.geo-tile__best { position: absolute; top: -15px; right: 10px; font-size: 18px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); }
.geo-tile--best { padding-top: 18px; }
.geo-tile__best .stars { gap: 2px; }

/* ---------- Espace parents ---------- */
.geo-ps { display: grid; gap: 10px; }
.geo-ps__row { display: grid; gap: 6px; }
.geo-ps__theme { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.geo-ps__count { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.geo-ps__dots { display: flex; flex-wrap: wrap; gap: 6px; }
.geo-ps__dot { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; font-size: 14px; line-height: 1.3; }
.geo-ps__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.geo-ps__dot.is-ok { background: #d6f6df; }
.geo-ps__dot.is-ok::before { background: var(--grass); }
.geo-ps__dot.is-ko { background: #ffe0da; }
.geo-ps__dot.is-ko::before { background: var(--tomato); }
.geo-ps__rest { font-size: 14px; color: var(--ink-soft); align-self: center; }

/* ---------- Portrait et petits écrans : carte en haut, panneau dessous ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  .game-host.game-geo { height: auto; }
  .geo-play, .geo-menu { flex: 1 1 auto; }
  .geo-play { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; }
  .geo-play .geo-mapzone { aspect-ratio: 1000 / 928; width: 100%; min-height: 200px; max-height: 64vh; max-height: min(64vh, calc(100dvh - 360px)); }
  .geo-panel { overflow: visible; }
  .geo-play, .geo-menu { align-content: start; }
  .geo-menu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .geo-menu__map { height: clamp(190px, 40vh, 540px); }
  .geo-menu__side { overflow: visible; }
  .geo-tiles { grid-template-columns: 1fr 1fr; }
}
/* iPad en portrait : la carte laisse la place au panneau de chaque activité
   (tout tient à l'écran, sans défilement). */
@media (max-aspect-ratio: 1/1) and (min-width: 721px) {
  .geo-play--name .geo-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .geo-play--find .geo-mapzone { max-height: min(64vh, calc(100dvh - 390px)); }
  .geo-play--name .geo-mapzone { max-height: min(64vh, calc(100dvh - 480px)); }
  .geo-play--labels .geo-mapzone { max-height: min(64vh, calc(100dvh - 470px)); }
  .geo-play--discover .geo-mapzone { max-height: min(64vh, calc(100dvh - 610px)); }
  .geo-play--quiz .geo-mapzone { max-height: min(64vh, calc(100dvh - 640px)); }
  /* Menu : la carte prend la hauteur que laissent les activités (CE1 : 4 tuiles ; CM2 : thèmes + 5 tuiles). */
  .geo-menu__map { height: clamp(260px, calc(100vh - 720px), 540px); height: clamp(260px, calc(100dvh - 720px), 540px); }
  .geo-menu--ce1 .geo-menu__map { height: clamp(260px, calc(100vh - 470px), 760px); height: clamp(260px, calc(100dvh - 470px), 760px); }
}
@media (max-width: 560px) {
  .geo-panel { padding: 10px; gap: 8px; }
  .geo-main { gap: 8px; }
  .geo-panel__title { font-size: 17px; }
  .geo-back { min-height: 56px; padding-inline: 12px; }
  .geo-ask .bubble { font-size: 16px; padding: 7px 12px; margin-bottom: 8px; }
  .geo-q { padding: 6px 8px 6px 48px; }
  .geo-q__say { min-width: 56px; min-height: 56px; }
  .geo-q__name { font-size: 25px; }
  .geo-q__name--small { font-size: 18px; }
  .geo-answers { gap: 8px; }
  .geo-answer { min-height: 56px; font-size: 18px; }
  /* Découvrir : les noms défilent sur deux lignes, de gauche à droite,
     pour que la carte et la bulle de Plume restent visibles. */
  .geo-play--discover .geo-list {
    display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: max-content;
    overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 10px; scrollbar-width: thin;
  }
  /* Sur téléphone, les boutons de zoom gardent 56 px (cible tactile). */
  .geo-zoom { left: 6px; bottom: 6px; gap: 6px; }
  .geo-zoom .geo-zbtn { width: 56px; height: 56px; min-width: 56px; min-height: 56px; font-size: 26px; }
  /* « Quel est son nom ? » : on ne touche pas la carte, elle cède un peu de place aux 3 gros boutons. */
  .geo-play--name .geo-mapzone { max-height: max(200px, calc(100dvh - 536px)); }
  /* Quiz : la carte montre la réponse ; elle rapetisse un peu pour garder l'explication et « Question suivante » à l'écran. */
  .geo-play--quiz .geo-mapzone { max-height: max(200px, calc(100dvh - 580px)); }
  .geo-item, .geo-label-chip { font-size: 17px; }
  .geo-tile { min-height: 80px; }
  .geo-tile__emoji { width: 50px; height: 50px; font-size: 28px; }
  .geo-tiles, .geo-menu--ce1 .geo-tiles { grid-template-columns: 1fr; }
  .geo-chip { font-size: 16px; padding: 4px 12px; }
}