/* =========================================================
   LA PLAINE EN 3D
   La scène occupe tout l'écran sous l'en-tête ; les commandes
   flottent par-dessus, jamais au milieu du village.
   ========================================================= */
.vue--carte { background: #0d1b2c; }

.c3 {
  position: relative;
  height: 100svh;
  min-height: 460px;
  overflow: hidden;
}
.c3-scene { position: absolute; inset: 0; }
.c3-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.c3-scene canvas:active { cursor: grabbing; }

/* ---------- Le bandeau du haut ---------- */
.c3-tete {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  padding: .9rem clamp(.8rem, 3vw, 1.6rem);
  background: linear-gradient(rgba(6, 18, 30, .78), rgba(6, 18, 30, 0));
  pointer-events: none;
}
.c3-tete > * { pointer-events: auto; }
.c3-retour {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff;
  text-decoration: none; font-weight: 600; font-size: .82rem;
  backdrop-filter: blur(6px);
  transition: background-color .18s;
}
.c3-retour:hover { background: rgba(255, 255, 255, .3); }
.c3-titre { color: #fff; }
.c3-titre h1 {
  margin: 0; font-size: clamp(1.2rem, 3.4vw, 1.9rem); line-height: 1.05; color: #fff;
}
.c3-titre p {
  margin: .15rem 0 0; font-size: .8rem; color: #bcd6e4; max-width: 46ch; line-height: 1.4;
}

/* ---------- Le pupitre du bas ---------- */
.c3-pupitre {
  position: absolute; left: 50%; bottom: clamp(.7rem, 2vh, 1.4rem);
  transform: translateX(-50%); z-index: 6;
  width: min(760px, calc(100% - 1.6rem));
  background: rgba(10, 24, 38, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: .8rem clamp(.8rem, 2.6vw, 1.2rem) .9rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9);
  color: #eaf3f8;
}
.c3-ligne { display: flex; align-items: center; gap: .8rem; }
.c3-ligne + .c3-ligne { margin-top: .7rem; }

.c3-horloge { flex: none; text-align: center; min-width: 88px; }
.c3-horloge b {
  display: block; font-family: var(--f-titre, inherit);
  font-size: 1.5rem; line-height: 1; letter-spacing: .02em; color: #fff;
}
.c3-horloge span {
  display: block; margin-top: .1rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-anis);
}

/* Le curseur d'heure, avec le dégradé du ciel en fond de piste */
.c3-curseur { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.c3-curseur input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; border-radius: 999px; outline: 0;
  background: linear-gradient(90deg,
    #0a1424 0%, #2c3457 10%, #f0a878 27%, #9fd0ee 38%,
    #8ec6ea 54%, #b9d4e6 69%, #e08a5a 77%, #2b2f52 83%, #0a1424 100%);
  border: 1px solid rgba(255, 255, 255, .22);
  cursor: pointer;
}
.c3-curseur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-anis);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6); cursor: grab;
}
.c3-curseur input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-anis);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6); cursor: grab;
}
.c3-curseur input[type="range"]:focus-visible { outline: 3px solid var(--c-anis); outline-offset: 3px; }
.c3-reperes {
  display: flex; justify-content: space-between;
  font-size: .64rem; letter-spacing: .06em; color: #9fb8c8;
}

.c3-boutons { display: flex; gap: .4rem; flex-wrap: wrap; }
.c3-boutons button {
  border: 1px solid rgba(255, 255, 255, .2); cursor: pointer;
  background: rgba(255, 255, 255, .08); color: #eaf3f8;
  font-family: inherit; font-size: .76rem; font-weight: 600;
  padding: .38rem .75rem; border-radius: 999px;
  transition: background-color .18s, border-color .18s;
}
.c3-boutons button:hover { background: rgba(255, 255, 255, .2); }
.c3-boutons button[aria-pressed="true"] {
  background: var(--c-anis); border-color: var(--c-anis); color: #2f3400;
}
.c3-aide {
  margin: .55rem 0 0; font-size: .7rem; color: #9fb8c8; line-height: 1.45;
}
.c3-aide b { color: #cfe2ee; font-weight: 600; }

/* ---------- Les étiquettes de lieux ---------- */
.c3-etiquettes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.c3-eti {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 0; background: none; padding: 0; cursor: pointer;
  pointer-events: auto; font-family: inherit;
  will-change: transform;
}
.c3-eti__pt {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c-anis); border: 2px solid rgba(10, 24, 38, .8);
  box-shadow: 0 0 0 0 rgba(206, 217, 80, .6);
  order: 2;
}
.c3-eti__t {
  order: 1;
  font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  color: #fff; white-space: nowrap;
  background: rgba(10, 24, 38, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: .16rem .5rem; border-radius: 999px;
  backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(3px);
  transition: opacity .18s, transform .18s;
}
.c3-eti--vedette .c3-eti__t { opacity: 1; transform: none; }
.c3-eti:hover .c3-eti__t, .c3-eti:focus-visible .c3-eti__t { opacity: 1; transform: none; }
.c3-eti:focus-visible { outline: 2px solid var(--c-anis); outline-offset: 4px; border-radius: 4px; }
.c3-eti[data-genre="eglise"] .c3-eti__pt { background: #efb142; }
.c3-eti[data-genre="mairie"] .c3-eti__pt { background: #ffffff; }
.c3-eti[data-genre="eau"]    .c3-eti__pt { background: #4bb3d6; }
.c3-eti[data-genre="ecole"]  .c3-eti__pt { background: #6ca860; }
.c3-eti[data-genre="ccas"]   .c3-eti__pt { background: #0383a8; }
.c3-eti[data-genre="sport"]  .c3-eti__pt { background: #b48052; }

/* ---------- Attente et repli ---------- */
.c3-attente, .c3-repli {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; text-align: center; padding: 1.5rem;
  color: #d5e6f0;
}
.c3-attente span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--c-anis);
  animation: c3Tourne 1s linear infinite;
}
@keyframes c3Tourne { to { transform: rotate(360deg); } }
.c3-repli p { max-width: 42ch; line-height: 1.6; margin: 0; }

/* ---------- Mention de source ---------- */
.c3-source {
  position: absolute; right: .6rem; top: auto; bottom: .4rem; z-index: 3;
  font-size: .6rem; color: rgba(255, 255, 255, .5);
}
.c3-source a { color: inherit; }

@media (max-width: 720px) {
  .c3 { height: 100svh; }
  .c3-tete { padding: .7rem .8rem; }
  .c3-titre p { display: none; }
  .c3-pupitre { padding: .7rem .8rem .8rem; border-radius: 14px; }
  .c3-ligne { flex-wrap: wrap; gap: .5rem; }
  .c3-horloge { min-width: 72px; text-align: left; }
  .c3-horloge b { font-size: 1.2rem; }
  .c3-aide { display: none; }
  .c3-eti__t { font-size: .62rem; }
  .c3-eti:not(.c3-eti--vedette) .c3-eti__t { display: none; }
  .c3-source { bottom: auto; top: 3.6rem; right: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .c3-attente span { animation: none; }
}


/* ═══ TÉLÉPHONE EN PAYSAGE ═══
   Le pupitre prend toute la hauteur utile : on le met de côté. */
@media (max-height: 460px) and (orientation: landscape) {
  .c3 { min-height: 320px; }
  .c3-pupitre {
    left: auto; right: .6rem; bottom: .6rem; transform: none;
    width: min(400px, 52vw); padding: .55rem .7rem .6rem;
  }
  .c3-ligne { gap: .5rem; }
  .c3-horloge b { font-size: 1.05rem; }
  .c3-aide, .c3-reperes { display: none; }
  .c3-titre p { display: none; }
}