/* ── HIC SUNT · Atlas Vivant — globe interactif ────────────────────────────
   Un vrai globe (canvas + projection orthographique d3-geo, voir atlas.js)
   qu'on fait pivoter au doigt, plein cadre — aucune bordure, aucun cadre,
   pas de boutons +/-. Grammaire de la nouvelle DA en surimpression
   (eyebrow/titre, --accent dynamique), sans fond ni cadre propre pour ne
   pas recréer de "boîte" par-dessus le globe. */

/* Fond spatial fixe (pas var(--fog-soft)) : un vrai globe flottant dans le
   noir, pas une silhouette de pays sur fond crème — seul écran de l'app à
   déroger volontairement à la palette neutre, le sujet ici EST le globe. */
.atlas-globe-screen{ position:absolute; inset:0; overflow:hidden; background:#050810 }
.atlas-globe-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab }

/* ── L'aperçu, en tête du Monde ──────────────────────────────────────────
   Le même globe, le même moteur — mais EN FLUX, dans un écran qui défile,
   et sans le doigt. Trois différences avec l'Atlas entier, et chacune a
   sa raison :

     · en flux (position:relative) plutôt qu'en absolu : il doit pousser
       le fil vers le bas, pas se poser par-dessus ;
     · touch-action:pan-y sur le rendu : le glissement vertical appartient
       à la PAGE. Sans cette ligne, les deux premiers tiers de l'écran
       seraient impossibles à faire défiler ;
     · un voile en bas : sans lui, la Terre s'arrête sur une ligne droite
       au milieu de l'écran — deux images collées, pas un seul écran.

   58vh : assez pour que le globe soit le sujet, assez peu pour que le
   haut du fil dépasse et invite à descendre. */
.atlas-globe-screen.atlas-apercu{
  position:relative; inset:auto;
  height:58vh; min-height:340px; max-height:560px;
  border-radius:0 0 var(--r-lg,26px) var(--r-lg,26px);
}
/* ── Le globe passe SOUS la barre d'état ──────────────────────────────
   Charlotte, le 6 septembre, capture à l'appui : « le bandeau blanc en
   haut à corriger ». .tabview réserve la hauteur de l'encoche pour tous
   les onglets ; l'Accueil se la reprend par marge négative pour que sa
   photo monte jusqu'au bord (voir .ref-heros, da-reference.css). Le
   Monde ne le faisait pas : son globe démarrait 59 px plus bas, et ces
   59 px montraient l'ivoire du fond — une bande crème entre l'heure et
   la Terre, sur le seul écran qui aurait dû être sombre jusqu'en haut.

   Deuxième symptôme, même cause : l'heure restait en NOIR. barre-statut.js
   ne passe au blanc que si le bloc sombre couvre réellement le haut
   (couvreLeHaut : top <= 0) — un globe qui commence à +59 ne le couvre
   pas. Le remonter corrige les deux d'un coup, sans toucher à la règle.

   On rend l'encoche en hauteur, pour que le bas du globe — et donc tout
   le fil en dessous — ne bouge pas d'un pixel. */
.tabview[data-tab="profile"] .monde-ecran{ margin-top:calc(-1 * var(--encoche)) }
.tabview[data-tab="profile"] .atlas-globe-screen.atlas-apercu{
  height:calc(58vh + var(--encoche));
  min-height:calc(340px + var(--encoche));
  max-height:calc(560px + var(--encoche));
}
/* ── L'attribution Mapbox, dans l'aperçu ──────────────────────────────
   « le map[box] pas aligné ». Les deux dégagements écrits plus bas sont
   portés par .as-tab — l'Atlas PLEIN ÉCRAN. L'aperçu du Monde n'est pas
   .as-tab : il n'en recevait aucun, et le logo comme le bouton
   d'attribution retombaient à leur place par défaut, dans les coins bas
   de l'aperçu, exactement là où vivent « Votre monde » et son décompte.
   Le logo se lisait donc par-dessus le texte.

   70 px : la hauteur mesurée de la porte (.atlas-apercu-porte, deux
   lignes plus 26 px de retrait bas), plus 14 px d'air. On ne réduit ni
   ne masque rien — les conditions Mapbox l'interdisent — on ne fait que
   dégager la bande occupée. */
.atlas-apercu .mapboxgl-ctrl-bottom-left{ margin-bottom:84px; margin-left:12px }
.atlas-apercu .mapboxgl-ctrl-bottom-right{ margin-bottom:84px; margin-right:12px }
.atlas-apercu .atlas-globe-canvas,
.atlas-apercu .atlas-globe-map{ touch-action:pan-y; cursor:pointer }
/* Le voile ne va PAS jusqu'à l'ivoire. Première version : il fondait vers
   var(--bg), et le nom blanc se retrouvait posé sur du beige clair —
   illisible, sur l'élément qui porte le titre de l'écran. Le globe garde
   donc son propre bord, arrondi, et l'ivoire du fil commence après lui.
   Le voile ne sert plus qu'à une chose : assombrir le bas pour que le
   texte tienne, quel que soit ce que le globe montre à cet endroit —
   un océan sombre ou une calotte polaire. */
.atlas-apercu-voile{
  position:absolute; left:0; right:0; bottom:0; height:210px; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(5,8,16,.62) 58%, rgba(5,8,16,.9) 100%);
}
/* La porte : tout le bas de l'aperçu est touchable, et il porte le nom du
   lieu comme une couverture de livre porte son titre. */
.atlas-apercu-porte{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:0 22px 26px; border:0; background:none; text-align:left;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .14s var(--spring, ease);
}
.atlas-apercu-porte:active{ transform:scale(.985) }
/* Le même halo que sur l'Atlas entier : sans lui, du blanc sur un océan
   clair devient illisible — et ce n'est pas qu'une question d'allure. */
.atlas-apercu-porte .ref-marque{
  color:#FFFFFF; text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.atlas-apercu-porte .atlas-counter{
  margin-top:0; text-shadow:0 1px 12px rgba(0,0,0,.55);
}
/* Les deux portes du social, posées sur le globe. */
.monde-actions{
  position:absolute; z-index:3; right:22px;
  top:calc(30px + var(--encoche));
  display:flex; gap:8px;
}
/* L'en-tête du fil arrive APRÈS le globe : il n'a plus à réserver la
   hauteur de la barre d'état, le globe l'a fait pour lui. */
.monde-ecran .monde-tete{ padding-top:22px }
.atlas-globe-canvas:active{ cursor:grabbing }

/* ── Moteur Mapbox GL (globe photoréaliste) — voir atlas-mapbox.js ────────
   Même emplacement/dimensions que .atlas-globe-canvas ci-dessus (les deux
   ne coexistent jamais, un seul moteur actif à la fois selon
   _atlasUseMapbox()). Les contrôles Mapbox (attribution obligatoire,
   logo) sont remontés du même montant que .atlas-globe-login/
   .atlas-info-panel ci-dessous en mode onglet, pour ne pas passer sous la
   barre d'onglets flottante. */
/* isolation:isolate — force un contexte d'empilement propre autour du
   canvas WebGL de Mapbox. Sans ça, malgré le z-index:50 de .tabbar (un
   frère de .atlas-globe-screen plus haut dans le DOM, voir tabbarHTML()
   dans app.js) et le z-index:2 propre à Mapbox pour ses contrôles
   (mapbox-gl.css), le rendu GPU composité à part du canvas WebGL "perçait"
   au-dessus de la pilule d'onglets sur WebKit — un contexte d'empilement
   explicite contient ce composité au lieu de le laisser comparer son
   z-index interne directement à celui d'éléments totalement extérieurs. */
.atlas-globe-map{ position:absolute; inset:0; width:100%; height:100%; isolation:isolate; z-index:0 }
.atlas-globe-screen.as-tab .atlas-globe-map .mapboxgl-ctrl-bottom-right{
  margin-bottom:96px;
}
/* Le logo vit maintenant en bas à gauche (atlas-mapbox.js). Il doit
   dégager la barre d'onglets flottante ET la carte d'information qui se
   pose au-dessus d'elle — sinon la carte le recouvre, ce que les
   conditions d'attribution interdisent. Le panneau lui réserve la bande
   correspondante (voir .atlas-globe-screen.as-tab .atlas-info-panel). */
.atlas-globe-screen.as-tab .atlas-globe-map .mapboxgl-ctrl-bottom-left{
  margin-bottom:calc(104px + env(safe-area-inset-bottom,0px));
  margin-left:14px;
}
/* Le logo a longtemps vécu en HAUT à gauche, poussé toujours plus bas au
   fil des versions de l'en-tête (120px, puis 250px) pour ne pas recouvrir
   le titre. Il finissait par flotter au milieu du globe, juste sous les
   chiffres, où il se lisait comme un élément de l'interface plutôt que
   comme l'attribution d'une carte. Il est retourné en bas à gauche, sa
   place normale ; cette règle-ci n'a plus d'objet et disparaît avec lui. */
/* Vignette photo circulaire posée sur le trail du mode Track (voir
   track.js) — référence Polarsteps (marqueur photo rond avec halo
   lumineux sur le trail), pas une icône générique. --accent en anneau
   extérieur (même teinte dynamique que le reste de l'app), léger flou
   derrière pour l'effet halo. N'est PLUS utilisée sur le globe Atlas
   lui-même, qui pose des pastilles drapeau+nom (.atlas-mb-pill
   ci-dessous) sur chaque pays révélé, exactement comme la capture
   Polarsteps "Explore" envoyée par Charlotte. */
.atlas-mb-pin{ cursor:pointer; width:48px; height:48px }
.atlas-mb-pin-photo{
  display:block; width:100%; height:100%; border-radius:50%;
  background-size:cover; background-position:center; background-color:var(--fog-soft);
  border:2.5px solid #FFFFFF;
  box-shadow:0 0 0 3px var(--accent,#2F7DE1), 0 0 14px 2px rgba(120,180,255,0.55), 0 4px 12px rgba(0,0,0,0.4);
}
/* Drapeau seul, sans le nom du pays — trop chargé une fois plusieurs pays
   révélés sur le globe (retour de Charlotte). */
.atlas-mb-pill{
  position:relative;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.atlas-mb-pill-flag{ font-size:21px; line-height:1 }
/* Territoire disputé sans code ISO2 (voir atlas-iso2.js) — point neutre
   plutôt qu'un drapeau inventé. */
.atlas-mb-pill.no-flag{ width:12px; height:12px; background:var(--accent,#2F7DE1) }
.atlas-mb-pill.no-flag .atlas-mb-pill-flag{ display:none }
/* Point vert : au moins un voyageur "à proximité" (nearby.js) est
   actuellement dans ce pays — la liste avec photos apparaît une fois la
   carte pays dépliée (.atlas-nearby-row plus bas), pas ici, pour garder
   le globe lisible même avec plusieurs personnes au même endroit. */
/* Habitée : le point vert anonyme a laissé place au visage du premier
   voyageur présent (_atlasMBPresenceHTML, atlas-mapbox.js). Un anneau
   accent autour de la pastille entière signale de loin qu'il se passe
   quelque chose ici, avant même qu'on distingue le visage. */
.atlas-mb-pill.habite{ box-shadow:0 0 0 2px var(--accent,#2F7DE1), 0 4px 16px rgba(0,0,0,.34) }
.atlas-mb-pill-dot{
  position:absolute; top:-6px; right:-6px;
  display:flex; align-items:center;
}
.ampd-av{
  width:20px; height:20px; border-radius:50%;
  background-size:cover; background-position:center; background-color:var(--accent,#2F7DE1);
  border:2px solid #FFFFFF; box-shadow:0 1px 5px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
}
.ampd-av.sans-photo{
  font-family:var(--sans); font-size:10px; font-weight:700; color:#FFFFFF;
  letter-spacing:0.01em;
}
/* « +2 » posé en débord derrière le visage — jamais une deuxième pastille
   ronde à côté, qui recommencerait à surcharger le globe. */
.ampd-n{
  margin-left:-5px; padding:0 5px 0 8px; height:16px; border-radius:var(--r-sm);
  background:#FFFFFF; color:var(--ink,#1A1814);
  font-family:var(--sans); font-size:9.5px; font-weight:700; line-height:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

/* Bouton "Amis" du haut — un .ihx-btn nu (icône seule) ne disait pas à quoi
   il servait ; un libellé à côté, plutôt qu'un simple ico(), lève
   l'ambiguïté sans bouton "+" ni menu. Reprend les proportions de
   .ihx-btn (même hauteur/rayon/fond) mais en pilule plus large. */
.atlas-friends-btn{
  height:36px; padding:0 14px 0 12px; border-radius:var(--r-lg);
  background:#FFFFFF; border:1px solid var(--line);
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink); font-family:var(--sans); font-size:12.5px; font-weight:600;
  box-shadow:0 1px 2px rgba(20,18,14,0.04);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  /* .atlas-globe-head (l'ancêtre direct) coupe pointer-events par défaut
     (voir son commentaire plus haut) — sans cette dérogation explicite, ce
     bouton n'a jamais réagi au tap, depuis sa toute première version en
     icône seule (même bug, pas introduit par le libellé "Amis"). */
  pointer-events:all;
}
.atlas-friends-btn:active{ transform:scale(0.96) }

/* padding-top: encoche + 6px, portée explicitement ici — contrairement
   aux 3 autres onglets (.disc-head/.deck-head/.pf, en flux normal, qui
   héritent le padding-top:env(safe-area-inset-top) de .tabview), un
   élément position:absolute comme .atlas-globe-head ne reçoit PAS le
   padding de son ancêtre positionné (le containing block d'un absolu se
   cale sur le bord de la boîte de padding, padding non-inclus dans le
   calcul de inset:0) — il doit porter l'encoche lui-même, sous peine de
   passer sous la barre de statut réelle (heure/wifi/batterie). 64px fixes
   en plus de l'encoche (l'ancienne valeur) créaient un vide inutile ;
   6px seuls (une version précédente de ce correctif) faisaient l'inverse
   et repassaient sous la barre de statut. */
.atlas-globe-head{
  position:absolute; left:0; right:0; top:0; z-index:2; pointer-events:none;
  padding:calc(6px + env(safe-area-inset-top,0px)) 24px 0;
}
/* Texte clair (fond spatial sombre désormais) — même halo qu'avant mais en
   noir plutôt qu'en crème, pour rester lisible sur les étoiles/l'océan. */
.atlas-globe-head .eyebrow,
.atlas-globe-head .atlas-title,
.atlas-globe-head .atlas-counter{
  color:#F2F0EA;
  text-shadow:0 1px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.7);
}
.atlas-title{
  font-family:var(--serif); font-weight:600; font-size:27px;
  letter-spacing:-0.028em; margin-top:10px; line-height:1.03;
  color:#FFFFFF;
}
.atlas-counter{
  font-family:var(--sans); font-size:13px; font-weight:400;
  color:#C9C6BE; margin-top:7px; letter-spacing:0.01em;
}
.atlas-globe-back{
  position:absolute; left:20px; top:calc(16px + env(safe-area-inset-top,0px));
  pointer-events:all;
}

.atlas-globe-login{
  position:absolute; left:20px; right:20px; bottom:calc(28px + env(safe-area-inset-bottom,0px));
  z-index:3; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius);
  box-shadow:var(--shadow-float); padding:18px;
}
/* En onglet, la barre du bas flotte par-dessus le contenu (position:
   absolute, z-index:50, voir .tabbar/screens.css) — les tabs en flux
   normal lui laissent la place via le padding-bottom de .tabview, mais
   .atlas-globe-screen (position:absolute;inset:0) ne l'hérite pas (même
   raison que le correctif de .atlas-globe-head). Sans ce décalage, la
   carte pays / le bouton de connexion se retrouvaient partiellement
   cachés derrière la barre d'onglets plutôt que posés au-dessus. */
.atlas-globe-screen.as-tab .atlas-globe-login{
  bottom:calc(104px + env(safe-area-inset-bottom,0px));
}
.atlas-globe-login p{ font-size:13px; color:var(--sub); line-height:1.5; margin-bottom:12px }

/* ── Infobulle pays (tap sur la carte) — "place card" ancrée en bas ───────
   position:absolute (pas fixed, même raison que le sceau ci-dessous) : le
   panneau glisse depuis le bas du cadre .ov, jamais depuis le bas de la
   fenêtre du navigateur sur l'aperçu desktop. */
.atlas-info-panel{
  position:absolute; left:0; right:0; bottom:0; z-index:25;
  padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
}
/* Même correctif que .atlas-globe-login ci-dessus, pour la même raison :
   sans lui, le bas de la carte pays (dont le bouton "+ ajouter une
   photo") passait derrière la barre d'onglets flottante. */
.atlas-globe-screen.as-tab .atlas-info-panel{
  /* +34px sur les 100 d'origine : la bande où le logo Mapbox se pose
     désormais. Sans elle, la carte d'information le recouvrirait. */
  padding-bottom:calc(134px + env(safe-area-inset-bottom,0px));
}
.atlas-info-card{
  pointer-events:auto; touch-action:none;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--card-radius); padding:14px 14px 14px var(--card-radius);
  box-shadow:var(--shadow-float);
  opacity:0; transform:translateY(16px);
  transition:opacity 0.3s var(--spring), transform 0.3s var(--spring);
}
.atlas-info-panel.in .atlas-info-card{ opacity:1; transform:translateY(0) }
.atlas-info-top{ display:flex; align-items:center; gap:12px }
/* Carte "visuelle" façon Polarsteps — la photo de couverture du pays EST
   le fond de toute la carte (pas juste une pile dans un coin), avec un
   dégradé bas pour lire le nom/statut par-dessus. Toute la carte est
   tapable et ouvre la galerie plein écran (window._atlasOpenPhotoGallery,
   atlas.js) — seulement quand ce pays a au moins une photo, sinon on
   garde la carte plate d'origine (.atlas-info-top) plutôt qu'inventer un
   visuel qui n'existe pas. */
.atlas-info-card.has-photo{
  position:relative; padding:0; overflow:hidden; cursor:pointer; border:none;
  min-height:190px; background-size:cover; background-position:center; background-color:var(--fog-soft);
}
/* Le voile démarrait à 40 % et ne devenait franc qu'au tout dernier
   pixel : sur une photo claire à cet endroit (falaise, sable, ciel), le
   nom du pays et la date se lisaient mal — retour de Charlotte sur la
   carte Italie. Il descend maintenant plus tôt et plus fort, avec un
   palier intermédiaire pour que la transition reste douce plutôt que de
   poser une barre noire au bas de l'image. */
.atlas-info-card.has-photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 22%,
    rgba(0,0,0,.34) 52%,
    rgba(0,0,0,.62) 76%,
    rgba(0,0,0,.84) 100%);
}
/* Défilement automatique quand il y a plusieurs photos (voir
   _atlasStartCoverRotation, atlas.js) — deux calques en fondu enchaîné,
   sous le dégradé ci-dessus (z-index) pour que le texte reste lisible. */
.atlas-info-cover-a,.atlas-info-cover-b{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition:opacity 1s ease;
}
.atlas-info-cover-a{ opacity:1 }
.atlas-info-cover-b{ opacity:0 }
.atlas-info-photocount{
  position:absolute; top:12px; left:14px; z-index:2;
  display:flex; align-items:center; gap:5px;
  background:rgba(0,0,0,.32); color:#FFFFFF; font-family:var(--sans); font-size:11px; font-weight:700;
  border-radius:var(--r-lg); padding:5px 10px 5px 8px;
}
/* position:absolute + bottom:0 manquait ici : sans ça .atlas-info-body
   (nom du pays) restait en flux normal, donc tout en haut de la carte —
   exactement là où vit .atlas-info-photocount (top:12px;left:14px,
   visible dès 2 photos), d'où la superposition de texte remontée par
   Charlotte ("Italie" chevauchant le badge du nombre de photos). Pinné en
   bas, il retombe sur le dégradé sombre prévu pour lui (voir
   .has-photo::before) — c'est là que le texte blanc était censé se lire. */
.atlas-info-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 16px 16px }
.atlas-info-body .atlas-info-name{ color:#FFFFFF; text-shadow:0 1px 8px rgba(0,0,0,.35) }
.atlas-info-body .atlas-info-sub{ color:rgba(255,255,255,.82) }
/* Statut en menthe, comme partout ailleurs dans l'app — il était en
   contour blanc ici, seul cas où l'accent disparaissait. Un fond sombre
   très léger le décolle de la photo sans en faire un bouton. Un pays qui
   a des photos a forcément été visité ou exploré : jamais « dans la
   brume », donc jamais la couleur grise de cet état. */
.atlas-info-body .atlas-info-status{
  display:inline-block; margin-top:8px;
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:rgba(0,0,0,.26);
}
.atlas-info-name{
  font-family:var(--serif); font-weight:600; font-size:17px;
  letter-spacing:-0.2px; color:var(--ink);
}
.atlas-info-sub{ font-size:12px; color:var(--sub); margin-top:2px }
.atlas-info-status{
  flex:none; font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:0.8px; text-transform:uppercase;
  border:1px solid; border-radius:var(--r-lg); padding:5px 10px;
}

/* Voyageurs "à proximité" (nearby.js) actuellement dans ce pays — visible
   une fois la carte pays dépliée, en photo de profil plutôt qu'un simple
   nombre : c'est ce qui donne envie de dire bonjour. Sur fond photo
   (.has-photo), le texte/liseré passent en blanc pour rester lisibles
   sur la couverture ; sinon ils reprennent les couleurs standard de la
   carte plate. */
.atlas-nearby-row{
  display:flex; align-items:center; gap:8px; margin-top:10px;
}
.atlas-nearby-row-label{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.4px;
  color:var(--sub);
}
.atlas-info-body .atlas-nearby-row-label{ color:rgba(255,255,255,.85) }
.atlas-nearby-row-chips{ display:flex; }
.atlas-nearby-chip{
  width:26px; height:26px; border-radius:50%; padding:0; margin-left:-8px;
  border:2px solid var(--surface); background:var(--fog-soft); cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.atlas-info-body .atlas-nearby-chip{ border-color:rgba(255,255,255,.9) }
.atlas-nearby-chip:first-child{ margin-left:0 }
.atlas-nearby-chip-photo{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:50%;
  background-size:cover; background-position:center;
}
.atlas-nearby-chip-initials{
  background-color:var(--accent,#2F7DE1); color:#FFFFFF;
  font-family:var(--sans); font-size:10px; font-weight:700;
}

/* ── Sceau de dévoilement / jalon — superposition centrée sur l'écran ─────
   position:absolute (pas fixed) scopé à .ov (inset:0 sur .screen) : sur
   desktop .phone est une maquette 393x852 non plein écran (position:
   relative, voir core.css) — un position:fixed déborderait de la maquette
   et se centrerait sur toute la fenêtre du navigateur au lieu du téléphone. */
.atlas-seal-layer{
  position:absolute; inset:0; z-index:30; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.atlas-seal{
  pointer-events:auto; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:32px 40px;
  background:rgba(255,255,255,0.97);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-float);
  opacity:0; transform:scale(0.82) translateY(6px);
  transition:opacity 0.38s var(--spring), transform 0.38s var(--spring);
  max-width:78vw;
}
.atlas-seal.in{ opacity:1; transform:scale(1) translateY(0) }
.atlas-seal.in:active{ transform:scale(0.97) translateY(0); opacity:0.92 }
.atlas-seal-badge{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--onink);
  background:var(--accent,radial-gradient(120% 120% at 30% 25%, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%));
  box-shadow:0 6px 18px -6px rgba(20,18,14,0.5), inset 0 0 0 2px rgba(255,255,255,0.25);
}
.atlas-milestone-badge{
  background:var(--accent,radial-gradient(120% 120% at 30% 25%, var(--gold-bright) 0%, var(--gold-deep) 100%));
}
.atlas-seal-name{
  font-family:var(--serif); font-weight:600; font-size:21px;
  letter-spacing:-0.3px; color:var(--ink); text-align:center;
}
.atlas-seal-sub{
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--sub);
}

/* ── Atlas comme onglet de la barre du bas ──────────────────────────────
   .tabview scrolle lui-même par défaut (screens.css) — correct pour les
   autres onglets, mais casse ici : le globe occupe tout l'écran (pas de
   contenu à faire défiler) et .atlas-seal-layer / .atlas-info-panel sont
   pensés pour rester épinglés (position:absolute scopé à .atlas-globe-
   screen, voir leurs commentaires plus haut). Sans ce correctif, tout
   glisserait avec le scroll du tabview au lieu de rester fixe à l'écran. */
.tabview[data-tab="atlas"]{overflow:hidden;display:flex;flex-direction:column}

/* ── Stories des voyageurs dans le panneau pays (réseau social façon
   Polarsteps — demande de Charlotte) : rail horizontal de médaillons
   ronds cerclés accent, remplis après coup par _atlasFillCountryStories
   (atlas.js) ; un tap ouvre la galerie plein écran existante. */
.atlas-info-stories:empty{ display:none }
.atlas-stories-label{
  display:flex; align-items:center; gap:5px; margin-top:12px;
  font-family:var(--sans); font-size:11px; font-weight:700; color:var(--sub);
}
.atlas-info-card.has-photo .atlas-stories-label{ color:rgba(255,255,255,.85) }
/* padding horizontal ≥ l'anneau (2px de box-shadow) + marges négatives
   équivalentes : dès qu'un axe est en overflow:auto, l'autre ne peut plus
   rester "visible" (il passe à auto) — sans cette réserve, l'anneau des
   médaillons se faisait rogner aux bords du rail (retour de Charlotte :
   « attention aux ronds de stories coupés sur les côtés »). */
.atlas-stories-rail{
  display:flex; gap:10px; overflow-x:auto;
  margin:0 -4px; padding:8px 4px 6px; scrollbar-width:none;
}
.atlas-stories-rail::-webkit-scrollbar{ display:none }
/* ── Ce qui suit le jeton d'arrondi sur l'Atlas, et ce qui n'y est pas ──
   Les trois panneaux de l'Atlas — l'invite de connexion, la fiche pays et
   l'invitation « voyageurs à proximité » — portaient leur arrondi écrit en
   dur à 18px. Ils n'ont donc pas suivi quand --card-radius est passé à 22,
   et l'Atlas s'est mis à jurer avec le reste sans qu'on sache dire
   pourquoi. Ils lisent le jeton désormais.

   Restent volontairement en dur :
   · .atlas-presence-chip (78px de large) — 22px sur un élément aussi
     étroit avale ses coins ;
   · .atlas-friends-btn, .atlas-info-status, .atlas-info-photocount — des
     pastilles, leur arrondi est une forme, pas une valeur de carte ;
   · .atlas-seal (24px) — le sceau est un objet à part, plus rond à
     dessein.
   Les vignettes de photos, elles, sont des CERCLES cerclés de menthe :
   même grammaire que le rail du fil, rien à aligner. */
.atlas-story-thumb{
  width:56px; height:56px; flex:none; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid var(--surface);
  box-shadow:0 0 0 2px var(--accent);
  background-size:cover; background-position:center; background-color:var(--fog-soft);
}


/* ── L'Atlas habité (presence.js) ───────────────────────────────────────
   Direction C validée par Charlotte. L'écran s'ouvrait sur un compteur de
   collection ("12 / 195 territoires révélés") : vrai, mais solitaire. Ces
   deux blocs sont les seuls endroits de l'Atlas qui parlent des autres
   avant qu'on ait touché quoi que ce soit. */
.atlas-presence{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  color:#FFFFFF; margin-top:5px; letter-spacing:0.01em;
  display:flex; align-items:center; gap:6px;
  text-shadow:0 1px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.7);
}
/* Le point vivant : même pastille dans l'en-tête et sur la barre du bas,
   pour qu'on comprenne du premier coup d'œil qu'ils parlent de la même
   chose. Pulsation coupée sous prefers-reduced-motion (elle est
   permanente, exactement ce que ce réglage demande d'éviter). */
.atlas-presence-pt{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#3DD68C; box-shadow:0 0 0 0 rgba(61,214,140,.7);
  animation:atlasPulse 2.4s ease-out infinite;
}
@keyframes atlasPulse{
  0%{ box-shadow:0 0 0 0 rgba(61,214,140,.55) }
  70%{ box-shadow:0 0 0 7px rgba(61,214,140,0) }
  100%{ box-shadow:0 0 0 0 rgba(61,214,140,0) }
}
@media (prefers-reduced-motion: reduce){
  .atlas-presence-pt{ animation:none }
}

/* La barre du bas. Même bande que la carte pays (.atlas-info-panel) —
   elles ne coexistent jamais, .effacee retire celle-ci quand l'autre
   s'ouvre (voir _atlasShowCountryInfo). */
.atlas-presence-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  padding:0 0 calc(14px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
  opacity:0; transform:translateY(14px);
  transition:opacity .34s var(--spring), transform .34s var(--spring);
}
.atlas-presence-bar.in{ opacity:1; transform:translateY(0) }
.atlas-globe-screen.as-tab .atlas-presence-bar{
  padding-bottom:calc(98px + env(safe-area-inset-bottom,0px));
}
.atlas-presence-bar.effacee{ opacity:0; transform:translateY(14px); pointer-events:none }

/* ── Dans l'aperçu du Monde ──────────────────────────────────────────────
   La même barre, plus basse et plus serrée : ici le globe ne fait que
   58 vh et « Votre monde » occupe déjà le bas. Elle se pose AU-DESSUS de
   cette porte, jamais dessus — sinon on toucherait l'Atlas en croyant
   toucher un visage.

   Elle existe parce que « qui est sur place » ne se trouvait que dans
   l'Atlas plein écran : deux tapes plus loin, et rien en chemin ne
   laissait soupçonner qu'il y avait quelqu'un. */
.atlas-presence-bar.apercu{
  padding-bottom:76px;
}
.atlas-presence-bar.apercu .atlas-presence-label{ font-size:10px; margin-bottom:5px }
.atlas-presence-bar.apercu .atlas-presence-rail{ gap:9px }
.atlas-presence-bar.apercu .atlas-presence-chip{ transform:scale(.92); transform-origin:left center }
/* L'invitation, elle, ne rétrécit pas : c'est le seul endroit où
   l'absence de monde se répare, et une phrase illisible ne se répare
   pas. */
.atlas-presence-bar.apercu .atlas-presence-invite{ font-size:12.5px }
.atlas-presence-label{
  display:flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase;
  color:rgba(255,255,255,.82); margin:0 0 9px 20px;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
/* Défilement horizontal plein cadre, sans barre visible — le rail déborde
   volontairement des marges de l'écran (padding gauche/droite dedans),
   pour qu'on voie qu'il continue. */
/* Pas d'accroche (scroll-snap) : avec scroll-padding à 0, la première
   pastille venait s'aligner sur le bord du cadre plutôt que sur la marge
   de 20 px, et se retrouvait rognée à gauche dès que le rail débordait —
   une marge visible d'un côté, aucune de l'autre. Un rail de petites
   pastilles n'a de toute façon rien à accrocher. */
.atlas-presence-rail{
  display:flex; gap:10px; overflow-x:auto; padding:2px 20px 4px;
  -webkit-overflow-scrolling:touch;
  pointer-events:auto;
}
.atlas-presence-rail::-webkit-scrollbar{ display:none }
.atlas-presence-chip{
  flex:none; width:78px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 6px 9px; border:none; border-radius:var(--r-md); cursor:pointer;
  background:rgba(14,18,28,.58);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 20px rgba(0,0,0,.34);
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--spring);
}
.atlas-presence-chip:active{ transform:scale(.94) }
.apc-av{ position:relative; width:42px; height:42px; flex:none }
.apc-av-img{
  display:block; width:100%; height:100%; border-radius:50%;
  background-size:cover; background-position:center;
  background-color:var(--accent,#2F7DE1);
  box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 0 0 4px var(--accent,#2F7DE1);
}
.apc-av-img.sans-photo{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:15px; font-weight:700; color:#FFFFFF;
}
/* Le drapeau dit le pays sans prendre une ligne de texte de plus — la
   ville, elle, mérite ses mots. */
.apc-flag{
  position:absolute; right:-3px; bottom:-2px; font-size:14px; line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.apc-n{
  font-family:var(--sans); font-size:12px; font-weight:600; color:#FFFFFF;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.apc-c{
  font-family:var(--sans); font-size:10.5px; font-weight:400;
  color:rgba(255,255,255,.62);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Cas vide : une invitation, pas un écran vide. C'est le seul endroit où
   l'absence de monde sur le globe est jouable plutôt que subie. */
.atlas-presence-invite{
  pointer-events:auto; display:flex; align-items:center; gap:12px;
  width:calc(100% - 40px); margin:0 20px; text-align:left;
  padding:13px 14px; border:none; border-radius:var(--card-radius); cursor:pointer;
  background:rgba(14,18,28,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 20px rgba(0,0,0,.34);
  color:#FFFFFF; -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--spring);
}
.atlas-presence-invite:active{ transform:scale(.98) }
.atlas-presence-invite .api-ico{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent,#2F7DE1); color:#FFFFFF;
}
.atlas-presence-invite .api-txt{ flex:1; min-width:0; display:block }
.atlas-presence-invite .api-txt b{
  display:block; font-family:var(--sans); font-size:13px; font-weight:600;
  color:#FFFFFF; margin-bottom:2px;
}
.atlas-presence-invite .api-txt i{
  display:block; font-style:normal; font-family:var(--sans);
  font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.66);
}
.atlas-presence-invite svg{ flex:none; color:rgba(255,255,255,.5) }

/* Deux boutons dans l'en-tête de l'Atlas : partager son monde, et les
   voyages des amis. Le premier n'a qu'une icône — l'action se comprend, et
   deux libellés côte à côte auraient mangé la largeur du titre. */
.atlas-head-btns{ display:flex; align-items:center; gap:8px; pointer-events:all }
.atlas-head-btns .atlas-friends-btn{ padding:0 12px }
.atlas-head-btns .atlas-friends-btn:first-child{ width:36px; padding:0; justify-content:center }