/*
 * globe.css — Styles du composant globe interactif tinyjstools.
 * À inclure sur toute page qui utilise globe.js.
 * Dépend des variables CSS globales du site (--bg, --surface, --border,
 * --text, --muted, --faint, --primary) définies dans style.css.
 */

/* ── Variables de couleur spécifiques au globe ───────────────────────── */
:root {
  --globe-ocean:  #b8d8ea;              /* bleu-gris mer naturel            */
  --globe-land:   #9abf78;              /* vert clair, herbe / forêt        */
  --globe-night:  rgba(20, 40, 80, .30);/* voile nuit léger                 */
  --globe-term:   #f59e0b;              /* couleur du terminateur           */
  --globe-grid:   rgba(80,120,180,.12); /* grille lat/lon                   */
  --globe-sun:    #f59e0b;              /* icône soleil + libellé           */
}
@media (prefers-color-scheme: dark) {
  :root {
    --globe-ocean: #2d5878;             /* bleu profond mais pas noir       */
    --globe-land:  #4a7a50;             /* vert forêt, plus clair           */
    --globe-night: rgba(0, 10, 30, .50);
    --globe-term:  #fbbf24;
    --globe-grid:  rgba(100,160,220,.15);
    --globe-sun:   #fde68a;
  }
}

/* ── Conteneur du globe ──────────────────────────────────────────────── */
#globe-wrap {
  position:      relative;
  width:         min(580px, 95vw);
  aspect-ratio:  1;
  margin:        0 auto;   /* centrage horizontal                          */
  border-radius: .75rem;
  border:        1px solid var(--clr-border);
  background:    var(--clr-surface);
  box-shadow:    var(--shadow);
  overflow:      hidden;   /* clip la vue zoomée proprement               */
  touch-action:  none;     /* empêche le zoom page sur tablette           */
}

/* ── Élément SVG ─────────────────────────────────────────────────────── */
#globe {
  display:      block;
  width:        100%;
  height:       100%;
  cursor:       grab;
  touch-action: none;
}
#globe.dragging { cursor: grabbing; }

/* ── Couches SVG ─────────────────────────────────────────────────────── */
.sphere   { fill: var(--globe-ocean); }
.grid     { fill: none; stroke: var(--globe-grid); stroke-width: .4; }
.land     { fill: var(--globe-land); }
.borders  { fill: none; stroke: rgba(255,255,255,.22); stroke-width: .5; }

/* Lignes géographiques remarquables */
.geo-equator { fill: none; stroke: rgba(60,110,200,.80);  stroke-width: 1.5; }
.geo-tropic  { fill: none; stroke: rgba(220,140,30,.70);  stroke-width: 1.1; stroke-dasharray: 6 3; }
.geo-polar   { fill: none; stroke: rgba(60,110,200,.55);  stroke-width: 1.1; stroke-dasharray: 3 4; }

.night      { fill: var(--globe-night); pointer-events: none; }
.terminator { fill: none; stroke: var(--globe-term); stroke-width: 1.5; stroke-dasharray: 5 3.5; opacity: .9; pointer-events: none; }

.sun-icon {
  font-size: 22px;
  dominant-baseline: middle;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
  fill: #facc15;
  filter: drop-shadow(0 0 4px #fbbf24);
}

/* Pôles */
.pole { stroke: rgba(30,70,180,.90); stroke-width: 1.8; fill: none; stroke-linecap: round; }

/* Points de villes */
.city-dot { fill: #f97316; stroke: #fff; stroke-width: 1; pointer-events: none; transition: r .1s; }
.city-dot:hover { r: 6px; }

/* ── Overlay de chargement ───────────────────────────────────────────── */
#loading {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--clr-surface);
  color:           var(--clr-text-muted);
  font-size:       .9rem;
}

/* ── Card ville ──────────────────────────────────────────────────────── */
#city-card {
  position:      absolute;
  display:       none;
  background:    var(--clr-surface);
  border:        1px solid var(--clr-border);
  border-radius: .5rem;
  padding:       .4rem .8rem;
  box-shadow:    0 4px 16px rgba(0,0,0,.14);
  pointer-events: auto;
  z-index:       20;
  max-width:     180px;
}
#city-card .city-name-primary { font-size: .9rem;  font-weight: 600; color: var(--clr-text); }
#city-card .city-name-secondary { font-size: .75rem; color: var(--clr-text-muted); margin-top: 1px; }
#city-card-close {
  position:   absolute;
  top:        4px;
  right:      6px;
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--clr-text-muted);
  font-size:  .9rem;
  line-height: 1;
  padding:    0;
}

/* ── Panneau d'information (UTC + position solaire) ──────────────────── */
#globe-info {
  text-align:  center;
  line-height: 1.9;
  font-size:   .875rem;
}
#globe-utc {
  font-size:           1rem;
  color:               var(--clr-text-muted);
  font-variant-numeric: tabular-nums;
}
#globe-sun-pos { color: var(--globe-sun); }
.globe-hint {
  margin-top: .35rem;
  color:      var(--clr-text-muted);
  font-size:  .78rem;
}

/* ── Légende ─────────────────────────────────────────────────────────── */
.globe-legend {
  display:     flex;
  gap:         1.5rem;
  align-items: center;
  font-size:   .78rem;
  color:       var(--clr-text-muted);
}
.globe-legend-item  { display: flex; align-items: center; gap: .4rem; }
.globe-swatch       { width: 28px; height: 10px; border-radius: 3px; }
.globe-swatch-day   { background: var(--globe-land); }
.globe-swatch-night { background: var(--globe-night); border: 1px solid var(--clr-border); }
.globe-swatch-term  { background: none; border-top: 2px dashed var(--globe-term); }

/* ── Arc de grand cercle (outil cities-distances) ────────────────────── */
.cd-arc {
  fill:            none;
  stroke:          #2563eb;
  stroke-width:    2.5;
  stroke-dasharray: 8 4;
  opacity:         .9;
}
.cd-pin {
  fill:   #2563eb;
  stroke: #fff;
  stroke-width: 2;
}
.cd-label {
  font-size:        11px;
  font-weight:      600;
  fill:             var(--clr-text, #0f172a);
  paint-order:      stroke fill;
  stroke:           var(--clr-surface, #fff);
  stroke-width:     3px;
  pointer-events:   none;
  user-select:      none;
}

/* ── Autocomplete des villes ─────────────────────────────────────────── */
.cd-autocomplete {
  position:    absolute;
  top:         100%;
  left:        0;
  right:       0;
  z-index:     100;
  background:  var(--clr-surface);
  border:      1px solid var(--clr-border);
  border-top:  none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow:  var(--shadow);
  list-style:  none;
  margin:      0;
  padding:     0;
  max-height:  240px;
  overflow-y:  auto;
}
.cd-autocomplete-item {
  padding:     .5rem .75rem;
  font-size:   .9rem;
  cursor:      pointer;
  color:       var(--clr-text);
  transition:  background var(--trans);
}
.cd-autocomplete-item:hover,
.cd-autocomplete-item:focus {
  background:  var(--clr-primary-dim, rgba(37,99,235,.08));
  outline:     none;
}

/* ── Bloc résultat ───────────────────────────────────────────────────── */
.cd-result-block {
  background:    var(--clr-surface);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius);
  padding:       1.5rem;
  box-shadow:    var(--shadow);
  margin:        1.5rem 0;
  text-align:    center;
}
.cd-distance-big {
  font-size:   2.5rem;
  font-weight: 800;
  color:       var(--clr-primary);
  line-height: 1.1;
}
.cd-distance-sub {
  font-size:  1rem;
  color:      var(--clr-text-muted);
  margin-top: .25rem;
}
.cd-cities-row {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             1rem;
  margin-top:      1rem;
  font-size:       .95rem;
  flex-wrap:       wrap;
}
.cd-city-name   { font-weight: 600; }
.cd-city-coords { font-size: .78rem; color: var(--clr-text-muted); }
.cd-arrow       { font-size: 1.3rem; color: var(--clr-text-muted); }
.cd-form-wrap {
  max-width:    520px;
  margin:       1.5rem auto;
}
.cd-field {
  display:       flex;
  flex-direction: column;
  gap:           .3rem;
  margin-bottom: .9rem;
  position:      relative;
}
.cd-field label { font-size: .85rem; font-weight: 600; color: var(--clr-text-muted); }
.cd-input {
  width:         100%;
  padding:       .55rem .75rem;
  border:        1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background:    var(--clr-input-bg);
  color:         var(--clr-text);
  font-size:     1rem;
  transition:    border-color var(--trans);
}
.cd-input:focus {
  outline:    none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-active-ring);
}
.cd-actions {
  display:  flex;
  gap:      .75rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.cd-btn-primary {
  flex:            1;
  padding:         .6rem 1.2rem;
  background:      var(--clr-primary);
  color:           #fff;
  border:          none;
  border-radius:   var(--radius-sm);
  font-size:       1rem;
  font-weight:     600;
  cursor:          pointer;
  transition:      background var(--trans);
}
.cd-btn-primary:hover { background: var(--clr-primary-hover, #1d4ed8); }
.cd-btn-secondary {
  padding:       .6rem 1rem;
  background:    var(--clr-surface);
  color:         var(--clr-text-muted);
  border:        1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size:     .9rem;
  cursor:        pointer;
  transition:    background var(--trans);
}
.cd-btn-secondary:hover { background: var(--clr-surface-2, #f8fafc); }
.cd-error {
  color:      #dc2626;
  font-size:  .85rem;
  margin-top: .4rem;
}
.cd-globe-wrap-outer {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             .75rem;
  margin:          1.5rem 0;
}
.cd-meta-row {
  font-size:  .8rem;
  color:      var(--clr-text-muted);
  text-align: center;
}