/* ===========================================================================
   LE GLOBE — feuille de emotion-globe.html
   ===========================================================================
   AUCUNE COULEUR EN DUR : tout passe par les jetons de
   marques/e-motion/emotion.css, pour que alpine.css puisse tout repeindre sans
   jamais ouvrir ce fichier.

   Depuis le lot 3, l'en-tete, le pied et le fond de page vivent dans
   noyau/vitrine.css, communs aux douze pages. Cette feuille ne porte plus
   que la scene, les listes et les cartes (.fi-*), plus .saisi (la date de
   saisie du calendrier, deplacee hors du pied).
   =========================================================================== */

/* Une seule regle couvre tout ce qui se focalise sur cette page : les liens et
   les boutons, les epingles de la sphere (.fiche), et la scene elle-meme.
   Chacun montre ou est le focus, dans le meme jaune que .diapo-btn du
   diaporama. (Elle nommait « le lien de retour » : ce lien a disparu avec
   l'en-tete commun du lot 3, la navigation le remplace.) */
a:focus-visible,
button:focus-visible,
.fiche:focus-visible,
.scene:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.avis { margin: 22px 0 0; color: var(--txt-dim); }

/* Le raccourci clavier du chapo (Echap) : kbd n'est stylee nulle part
   ailleurs dans le depot. */
.hero kbd { font: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--txt-dim); }

/* LA SPHERE. Carree, bornee par le PLUS PETIT cote de la fenetre : sur un
   ecran de lounge en 16/9 la hauteur decide, sur un telephone la largeur. */

.scene { position: relative; width: min(72vh, 72vw); height: min(72vh, 72vw); margin: 18px auto 4px; }
#globe { display: block; width: 100%; height: 100%; }

/* LES GESTES. data-geste est pose par la scene, et seulement quand elle est
   interactive : ecrite en dur, touch-action confisquerait le geste d'une scene
   qui n'en fait rien.

   Sans elle, le navigateur prend le glisse pour un defilement et LE GLOBE NE
   TOURNE JAMAIS AU DOIGT — sans erreur, sans rien dans la console.

   Elle porte sur la SCENE ENTIERE et non sur le seul canvas : les epingles
   recouvrent un quart du disque et ne descendent pas du canvas, elles en sont
   les soeurs. Limitee au canvas, un glisse commence sur une epingle faisait
   defiler la page. La scene fait exactement min(72vh, 72vw) — c'est la boite du
   globe, pas un ancetre debordant — donc la marge autour reste defilable.
   Et le selecteur porte sur l'attribut, pas sur .scene : une autre page qui
   reutiliserait le moteur doit heriter de la regle sans la recopier. */
[data-geste] { touch-action: none; }
/* Sans quoi un glisse sur la sphere selectionne le texte autour. */
[data-geste] { -webkit-user-select: none; user-select: none; }

/* LES EPINGLES. La demi-taille de la boite est portee par la MARGE, pour que
   le script n'ecrive que la position brute rendue par la scene : une
   propriete, une valeur, aucune arithmetique par image. */

.pins { position: absolute; inset: 0; pointer-events: none; }

.pin {
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: var(--txt); font: inherit; cursor: pointer; pointer-events: auto;
}
.pin:hover { border-color: var(--gold); }

/* Le nom n'apparait qu'au survol ou au focus : quinze etiquettes permanentes
   sur une sphere qui tourne se chevauchent des la premiere seconde. La liste
   sous le globe, elle, les nomme toutes, tout le temps.

   Et c'est « display », PAS « opacity » : a opacite nulle l'etiquette reste
   DANS LE FLUX, et quinze noms de 200 px poses au limbe droit elargissaient la
   page en permanence, sans que personne ait rien survole — +49 px de
   defilement a 360, +30 a 400. On perd la transition, on garde l'etiquette. */
.pin-nom {
  position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
  padding: 3px 7px; white-space: nowrap; pointer-events: none;
  font-family: var(--f-tech); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--txt); background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs); display: none;
}
.pin:hover .pin-nom,
.pin:focus-visible .pin-nom { display: block; }

/* LE COMPTE D'UNE GRAPPE, dans l'etiquette et non au centre du point : le
   canvas y peint deja le nombre, au milieu du disque de la grappe. Un second
   chiffre pose au meme endroit ne serait pas un badge, ce serait un doublon
   flou. Ici il ajoute quelque chose — « BARCELONA · 9 LIEUX ». */
.pin-n { color: var(--gold); }

/* AU DOIGT. La pastille visible reste a 28 px — a 44 elle couvrirait le pays
   qu'elle designe sur une sphere de 300 px. C'est la SURFACE cliquable qui passe
   a 44, par un ::after sans peinture.

   MAIS SEULEMENT SI ELLE NE MORD PERSONNE, d'ou .pin-large, que la page pose
   apres un test de collision. Mesure sur cette page, en 375x812 : agrandir
   toutes les cibles faisait passer de 6 a 9 le nombre d'epingles dont le centre
   exact appartient a une VOISINE — Alpine Race Lounge, Barcelona et Spa
   devenaient inatteignables meme en visant juste. Dix lieux europeens tiennent
   dans trente pixels ; une grande cible n'aide que celle qui est deja seule.
   Agrandir sans regarder autour, c'est supprimer un lieu en croyant le rendre
   accessible. */
@media (pointer: coarse) {
  .pin-large::after { content: ""; position: absolute; inset: -8px; }
}

/* LA CARTE DE DETAIL. Posee par transform comme les epingles : sa taille est
   mesuree UNE fois a l'ouverture, jamais par image. Elle se replie du cote
   oppose quand elle sortirait de la boite du globe, PUIS se borne aux quatre
   cotes — rien ici ne la decoupe, et une epingle peut etre projetee loin hors
   du cadre au zoom.

   touch-action et user-select sont RENDUS : [data-geste] les confisque pour
   toute la scene, ce qui est juste pour la sphere et faux pour un texte qu'on
   veut pouvoir selectionner. */
.fiche {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: min(250px, 80%); max-height: 100%; overflow: auto;
  padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  touch-action: auto; -webkit-user-select: text; user-select: text;
}
.fi-logo { display: block; height: 20px; width: auto; margin-bottom: 9px; }
.fi-nom { margin: 0; font-family: var(--f-primary); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.fi-det { margin: 3px 0 0; font-size: 12.5px; color: var(--txt-dim); }

/* La pastille « ouvre en … » d'un centre pas encore ouvert. */
.fi-ouvre {
  display: inline-block;
  margin: .2rem 0 0;
  padding: .1rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  color: var(--txt-mute);
  letter-spacing: .04em;
}

.fiche .item-liens { margin-top: 9px; }
.fiche .item-note { margin-top: 7px; }

/* Le trace tel que circuits.js le porte, SANS TRANSFORMATION — et il faut que
   ca reste vrai : une symetrie ecrite ici se compenserait en silence avec celle
   du generateur, et la panne ne se verrait que le jour ou l'une des deux
   bougerait. Ce n'est pas « le nord en haut » : les colonnes des VBO decrivent
   un repere local fabrique par l'exportateur, pas une geographie (cf.
   noyau/lieux.js), et rien ici n'etablit ou est le nord. Ce qui est etabli,
   mesure le 1er septembre 2026 : les onze traces ont la forme ET LE SENS DE
   ROTATION des cartes reelles. C'est cette comparaison-la que l'oeil fait ici,
   contre le globe. */
.fi-trace { display: block; width: 100%; height: auto; margin-bottom: 9px; fill: none; stroke: var(--gold); stroke-width: 1.6; }

/* Un membre de grappe est un BOUTON, pas une ligne : il mene a sa propre carte. */
.fi-membre { display: block; width: 100%; margin-top: 6px; padding: 6px 9px; text-align: left; background: none; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--txt); font: inherit; cursor: pointer; }
.fi-membre:hover { border-color: var(--gold); }
.fi-membre-nom { display: block; font-weight: 600; font-size: 13px; }
.fi-membre .fi-det { display: block; margin: 0; }

/* LE BOUTON DE VUE, sous le globe et hors de la scene. */
.vue-btn { display: block; margin: 10px auto 0; padding: 7px 14px; font-family: var(--f-tech); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-dim); background: none; border: 1px solid var(--line); border-radius: var(--radius-pill); cursor: pointer; transition: .15s; }
.vue-btn:hover { color: var(--gold); border-color: var(--gold); }

/* LA LISTE. Ce n'est pas un doublon decoratif du globe. Pour qui ne voit pas
   la sphere — lecteur d'ecran, canvas absent, donnees absentes — c'est la page. */

.listes { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 880px) { .listes { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.bloc h2 { margin: 0 0 2px; font-family: var(--f-tech); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.item { padding: 10px 0; border-top: 1px solid var(--line); }
.item-nom { font-weight: 600; }
.item-det { margin-top: 2px; font-size: 12.5px; color: var(--txt-dim); }
.item-note { margin-top: 5px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-mute); }
.item-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.item-liens a { text-decoration: none; padding: 4px 9px; font-family: var(--f-tech); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-dim); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.item-liens a:hover { color: var(--gold); border-color: var(--gold); }

.etat { margin-left: 8px; padding: 2px 7px; font-family: var(--f-tech); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius-xs); color: var(--txt-dim); border: 1px solid var(--line); white-space: nowrap; }
.etat-en-cours { color: var(--gold); background: var(--gold-dim); border-color: var(--line-strong); }

.saisi { margin: 0 0 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-mute); }
.saisi[hidden] { display: none; }