/* style.css — Sphaera (globe 3D) */

html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#020611; font-family:Arial,sans-serif; }
    canvas { display:block; }

    /* ── Écran de chargement ── */
    #loading-screen {
      position:fixed; inset:0; z-index:100;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      background:#020611; gap:16px; transition:opacity 0.6s ease;
    }
    #loading-screen.fade-out { opacity:0; pointer-events:none; }
    #loading-screen.hidden   { display:none; }
    .loading-title { font-size:24px; font-weight:700; color:#eef4ff; letter-spacing:2px; }
    .loading-label { font-size:15px; color:#7a9fd4; min-height:18px; }
    .progress-track { width:260px; height:6px; background:rgba(255,255,255,0.10); border-radius:999px; overflow:hidden; }
    .progress-bar   { height:100%; width:0%; background:linear-gradient(90deg,#3b7ef8,#7dd3fc); border-radius:999px; transition:width 0.25s ease; }
    .progress-pct   { font-size:14px; color:#4a7fc1; }

    /* ── Sans JavaScript (<noscript>) : présentation au-dessus de tout ── */
    .noscript-box {
      position:fixed; inset:0; z-index:300; overflow-y:auto; box-sizing:border-box;
      padding:32px max(16px, calc((100% - 760px) / 2));
      background:#020611; color:#dce6ff; font-size:15px; line-height:1.55;
    }
    .noscript-box h2 { color:#7dd3fc; font-size:22px; margin:0 0 14px; }
    .noscript-box li { margin-bottom:6px; }

    /* ── Panneau générique ── */
    .panel {
      position:absolute; top:14px; z-index:20; color:#eef4ff;
      background:linear-gradient(180deg,rgba(8,16,36,0.85),rgba(4,10,24,0.80));
      border:1px solid rgba(160,190,255,0.18); border-radius:14px; padding:14px;
      box-shadow:0 8px 30px rgba(0,0,0,0.28); backdrop-filter:blur(8px);
      opacity:0; transition:opacity 0.5s ease 0.2s;
    }
    .panel.visible { opacity:1; }

    /* ── Panneau gauche — minimal ── */
    #panel-left { left:14px; width:247px; } /* meme largeur que le panneau droit : zone visible centree */

    /* ── Panneau droit — contextuel ── */
    #panel-right { right:14px; width:247px; }
    /* ── Mode Océans : panneau de droite réduit ──
       Les données et la coupe vivent dans le dock à onglets sous les globes ;
       le panneau de droite ne garde que les boutons de vue + la coupe. */
    #panel-right.ocean-panel-min { width:200px; }
    #panel-right.ocean-panel-min #ocean-view-buttons { flex-direction:column; }
    #ocean-cols { display:flex; gap:14px; }
    #ocean-cols .ocean-col { flex:1; min-width:0; }

    /* ── Dock à onglets sous les globes (Données / Coupe) ── */
    #ocean-dock {
      position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
      display:flex; flex-direction:column; gap:8px;
      background:rgba(8,16,36,0.94);
      border:1px solid rgba(160,190,255,0.25);
      border-radius:12px;
      padding:8px 12px 12px; z-index:27;
      box-shadow:0 12px 34px rgba(0,0,0,0.45);
    }
    #ocean-dock-tabs {
      position:relative;
      display:flex; align-items:center; gap:6px;
      border-bottom:1px solid rgba(160,190,255,0.15); padding-bottom:6px;
    }
    .dock-tab {
      display:inline-flex; align-items:center; gap:6px;
      background:transparent; border:none; border-bottom:2px solid transparent;
      border-radius:0; color:#9fb3d0; padding:5px 14px; font-size:13px; cursor:pointer;
    }
    .dock-tab:hover { color:#cdd5db; }
    .dock-tab.active { color:#ffd23f; border-bottom-color:#ffd23f; }
    .dock-ico { width:14px; height:14px; flex:0 0 auto; }
    /* Case « Synchroniser » (tracé partagé) centrée sur la ligne des onglets. */
    #ocean-dock-tabs #oceanCutSyncWrap { position:absolute; left:50%; transform:translateX(-50%); margin:0; }
    /* Onglet DONNÉES en comparaison : 4 colonnes (Océans · Continents · Océans · Continents). */
    #ocean-tab-data .ocean-col { display:flex; gap:10px; }
    #ocean-tab-data .data-block { flex:1; min-width:0; }
    #ocean-tab-cut { position:relative; }
    #ocean-cut-plots .cut-col { flex:1; min-width:0; }
    .cut-head { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:4px; min-height:18px; }
    .cut-head span { color:#eef4ff; font-size:12px; font-weight:600; }
    .cut-nav {
      background:rgba(255,255,255,0.06); border:1px solid rgba(160,190,255,0.25);
      color:#eef4ff; border-radius:6px; cursor:pointer; font-size:14px; line-height:1; padding:1px 8px;
    }
    .cut-nav:hover { background:rgba(255,255,255,0.13); }
    /* Rangée des profondeurs (comparaison) : curseur G · case sync · curseur D. */
    #ocean-depth-row { display:flex; align-items:center; gap:14px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(160,190,255,0.15); }
    #ocean-depth-row .group { flex:1; min-width:0; margin:0; border:0; padding:0; }

    /* ── En-tête panneau gauche ── */
    .left-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:10px;
    }
    .left-header h1 { margin:0; font-size:17px; font-weight:700; }
    /* Logo S|H à gauche du titre */
    .app-brand { display:flex; align-items:center; gap:7px; min-width:0; }
    .app-logo  { width:30px; height:30px; flex-shrink:0; display:block; }
    /* Bouton « Mode PC lent » entre le titre et le drapeau */
    .header-actions { display:flex; align-items:center; gap:6px; }
    #liteModeBtn { width:30px; height:30px; }
    #liteModeWrap .ic-tooltip { top:calc(100% + 7px); bottom:auto; left:auto; right:-40px; transform:none;
                                white-space:normal; width:190px; text-align:left; }

    /* ── Sélecteur langue ── */
    #lang-picker { position:relative; }
    #langCurrentBtn {
      background:none; border:1px solid rgba(255,255,255,0.16);
      border-radius:8px; padding:4px 8px; cursor:pointer;
      line-height:0; color:#eef4ff;
      display:flex; align-items:center;
      transition:background 0.15s;
    }
    /* Drapeaux SVG : rendu identique PC / tablette */
    .lang-flag-svg {
      width:24px; height:16px; display:block;
      border:1px solid rgba(255,255,255,0.18); border-radius:2px;
    }
    #langDropdown .lang-flag-svg { width:22px; height:15px; }
    .lang-flag-btn .lflag { display:inline-flex; line-height:0; }
    #langCurrentBtn:hover { background:rgba(255,255,255,0.08); }
    #langDropdown {
      display:none; position:absolute; top:calc(100% + 6px); right:0;
      background:rgba(8,16,36,0.97); border:1px solid rgba(160,190,255,0.2);
      border-radius:10px; padding:6px; z-index:50;
      flex-direction:column; gap:3px; min-width:120px;
    }
    #langDropdown.open { display:flex; }
    .lang-flag-btn {
      display:flex; align-items:center; gap:8px;
      background:none; border:none; border-radius:6px;
      padding:5px 8px; cursor:pointer; width:100%; text-align:left;
      transition:background 0.15s;
    }
    .lang-flag-btn span.lname { font-size:13px; color:#dbe6ff; }
    .lang-flag-btn:hover  { background:rgba(255,255,255,0.08); }
    .lang-flag-btn.active { background:rgba(94,145,255,0.25); }

    /* ── Liste des globes ── */
    .globe-list-label {
      font-size:12px; letter-spacing:3px; text-transform:uppercase;
      color:rgba(160,190,255,0.5); margin-bottom:8px;
      display:block;
    }
    .globe-list { display:flex; flex-direction:column; gap:4px; }
    .globe-btn {
      display:flex; align-items:center; gap:9px;
      background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10);
      border-radius:10px; padding:9px 11px; cursor:pointer; color:#ccd9f0;
      font-size:14px; text-align:left; transition:0.2s ease; width:100%;
    }
    .globe-btn:hover  { background:rgba(255,255,255,0.10); border-color:rgba(160,190,255,0.25); }
    .globe-btn.active {
      background:rgba(94,145,255,0.22); border-color:rgba(140,180,255,0.45);
      color:#eef4ff;
    }
    .globe-btn svg { flex-shrink:0; opacity:0.7; transition:opacity 0.2s; }
    .globe-btn.active svg { opacity:1; }
    .globe-btn-name { flex:1; }

    /* ── Composants panneau droit ── */
    .group {
      margin-top:9px; padding-top:8px;
      border-top:1px solid rgba(160,190,255,0.12);
    }
    .group-notop { margin-top:9px; }
    .label { display:block; font-size:14px; margin-bottom:4px; color:#dbe6ff; }
    input[type="range"]          { width:100%; }
    input[type="range"]:disabled { opacity:0.55; cursor:not-allowed; }
    .buttons { display:flex; gap:5px; flex-wrap:wrap; }
    .btn {
      border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.08);
      color:#eef4ff; border-radius:999px; padding:6px 11px; font-size:14px;
      cursor:pointer; transition:0.2s ease;
    }
    .btn:hover    { background:rgba(255,255,255,0.14); }
    .btn.active   { background:rgba(94,145,255,0.35); border-color:rgba(140,180,255,0.45); }
    .btn:disabled { opacity:0.45; cursor:not-allowed; }
    /* Boutons d'action rouges (Lecture, Spot en mode globe animé) */
    .btn.btn-red {
      background: rgba(220,38,38,0.22);
      border-color: rgba(248,113,113,0.50);
      color: #fca5a5;
      font-weight: 600;
      box-shadow:
        0 0 var(--halo-blur) var(--halo-spread) rgba(248,113,113, var(--halo-alpha-inner)),
        0 0 calc(var(--halo-blur) * 2.3) calc(var(--halo-spread) * 3) rgba(220,38,38, var(--halo-alpha-outer));
    }
    .btn.btn-red:hover { background: rgba(220,38,38,0.35); color: #fecaca; }
    .btn.btn-red.active {
      background: rgba(220,38,38,0.45);
      border-color: rgba(248,113,113,0.70);
      color: #ffe4e6;
      box-shadow:
        0 0 calc(var(--halo-blur) * 1.4) calc(var(--halo-spread) * 1.5) rgba(248,113,113, calc(var(--halo-alpha-inner) * 1.3)),
        0 0 calc(var(--halo-blur) * 2.8) calc(var(--halo-spread) * 3.5) rgba(220,38,38, calc(var(--halo-alpha-outer) * 1.4));
    }
    .value { font-size:13px; color:#aecdff; margin-top:3px; text-align:right; }
    .hint  { margin-top:9px; font-size:13px; color:#98add6; }

    /* ── Onglets ── */
    .tab-row { display:flex; gap:4px; margin-bottom:6px; }
    .tab-btn {
      flex:1; border:1px solid rgba(255,255,255,0.14);
      background:rgba(255,255,255,0.05); color:#b7c7ea;
      border-radius:8px; padding:6px 4px; font-size:13px;
      cursor:pointer; text-align:center; transition:0.2s ease;
    }
    .tab-btn:hover  { background:rgba(255,255,255,0.10); color:#eef4ff; }
    .tab-btn.active { background:rgba(94,145,255,0.30); border-color:rgba(140,180,255,0.42); color:#eef4ff; }
    /* Onglets jaunes (Deux globes, Globe animé en mode saisons) */
    .tab-btn.tab-yellow {
      background: rgba(234,179,8,0.18);
      border-color: rgba(250,204,21,0.45);
      color: #fde68a;
      box-shadow:
        0 0 var(--halo-blur) var(--halo-spread) rgba(250,204,21, var(--halo-alpha-inner)),
        0 0 calc(var(--halo-blur) * 2.3) calc(var(--halo-spread) * 3) rgba(234,179,8, var(--halo-alpha-outer));
    }
    .tab-btn.tab-yellow:hover { background: rgba(234,179,8,0.30); color: #fef3c7; }
    .tab-btn.tab-yellow.active {
      background: rgba(234,179,8,0.42);
      border-color: rgba(250,204,21,0.70);
      color: #fef9c3;
      box-shadow:
        0 0 calc(var(--halo-blur) * 1.4) calc(var(--halo-spread) * 1.5) rgba(250,204,21, calc(var(--halo-alpha-inner) * 1.3)),
        0 0 calc(var(--halo-blur) * 2.8) calc(var(--halo-spread) * 3.5) rgba(234,179,8, calc(var(--halo-alpha-outer) * 1.4));
    }
    .tab-content         { display:none; }
    .tab-content.visible { display:block; }

    /* ── Blocs contextuels ── */
    .ctx { display:none; }
    .ctx.visible { display:block; }

    /* ── Barre de chargement différé ── */
    #deferred-loading {
      display:none; position:absolute; top:50%; left:50%;
      transform:translate(-50%, -50%); z-index:30;
      background:rgba(4,10,24,0.92); border:1px solid rgba(160,190,255,0.2);
      border-radius:12px; padding:14px 20px; text-align:center;
      min-width:240px; backdrop-filter:blur(8px);
    }
    #deferred-loading.visible { display:block; }
    #deferred-label { font-size:14px; color:#7a9fd4; margin-bottom:8px; }
    #deferred-track { width:100%; height:5px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
    #deferred-bar   { height:100%; width:0%; background:linear-gradient(90deg,#3b7ef8,#7dd3fc); border-radius:999px; transition:width 0.2s ease; }
    #deferred-pct   { font-size:13px; color:#4a7fc1; margin-top:5px; }
    /* ── Frise chronologique ères — overlay au-dessus du globe ── */
    #eras-frise-overlay {
      display: none;
      position: absolute;
      bottom: 72px; /* au-dessus de l'overlay des curseurs (bottom:1% + hauteur des pastilles) */
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      max-width: 700px;
      z-index: 25;
      pointer-events: none;
    }
    #eras-frise-overlay.visible { display: block; }
    #eras-frise-bar {
      pointer-events: all;
      cursor: pointer;
    }
    #eras-age-display {
      text-align: center;
      margin-bottom: 6px;
    }
    #eras-age-big {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: 1px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    }
    #eras-era-name {
      font-size: 12px;
      font-style: italic;
      opacity: 0.85;
      text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    }
    #eras-frise-bar {
      position: relative;
      height: 24px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
    }
    #eras-frise-cursor {
      position: absolute;
      top: 0; width: 3px; height: 100%;
      background: white;
      opacity: 0.95;
      transition: left 0.1s;
      box-shadow: 0 0 6px rgba(255,255,255,0.8);
    }
    .frise-label-row {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      color: rgba(220,230,255,0.6);
      margin-top: 3px;
      padding: 0 2px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    }

    /* ── Modale crédits ── */
    #credits-modal {
      display:none; position:fixed; inset:0; z-index:200;
      align-items:center; justify-content:center;
      background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
    }
    #credits-modal.open { display:flex; }
    #credits-box {
      background:linear-gradient(180deg,rgba(8,16,36,0.97),rgba(4,10,24,0.95));
      border:1px solid rgba(160,190,255,0.22); border-radius:16px;
      padding:24px 28px; max-width:420px; width:90%;
      color:#eef4ff; box-shadow:0 16px 48px rgba(0,0,0,0.5);
      max-height:85vh; overflow-y:auto;
    }
    #credits-box h2 { margin:0 0 6px; font-size:17px; letter-spacing:1px; color:#7dd3fc; }
    #credits-box h3 { margin:14px 0 6px; font-size:14px; color:#7dd3fc; text-transform:uppercase; letter-spacing:0.5px; }
    #credits-box p  { margin:0 0 8px; font-size:13px; line-height:1.7; color:#c8d8f0; }
    #credits-box a  { color:#7dd3fc; text-decoration:none; word-break:break-all; }
    #credits-box a:hover { text-decoration:underline; }
    #credits-dev   { font-size:14px; color:#eef4ff; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(160,190,255,0.15); }
    #credits-dev   { display:flex; align-items:center; gap:10px; }
    .credits-logo  { width:44px; height:44px; flex-shrink:0; }
    #credits-close {
      margin-top:16px; width:100%; padding:7px;
      background:rgba(94,145,255,0.2); border:1px solid rgba(94,145,255,0.3);
      border-radius:8px; color:#eef4ff; cursor:pointer; font-size:14px;
    }
    #credits-close:hover { background:rgba(94,145,255,0.35); }

    /* ── Modale mode d'emploi (même structure que credits) ── */
    #help-modal {
      display:none; position:fixed; inset:0; z-index:200;
      align-items:center; justify-content:center;
      background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
    }
    #help-modal.open { display:flex; }
    #help-box {
      background:linear-gradient(180deg,rgba(8,16,36,0.97),rgba(4,10,24,0.95));
      border:1px solid rgba(160,190,255,0.22); border-radius:16px;
      padding:24px 28px; max-width:520px; width:90%;
      color:#eef4ff; box-shadow:0 16px 48px rgba(0,0,0,0.5);
      max-height:85vh; overflow-y:auto;
    }
    #help-box h2 { margin:0 0 10px; font-size:17px; letter-spacing:1px; color:#7dd3fc; }
    #help-box h3 { margin:14px 0 6px; font-size:14px; color:#7dd3fc; text-transform:uppercase; letter-spacing:0.5px; }
    #help-box p  { margin:0 0 8px; font-size:13px; line-height:1.7; color:#c8d8f0; }
    #help-box ul { margin:4px 0 12px; padding-left:20px; }
    #help-box li { font-size:13px; line-height:1.6; color:#c8d8f0; margin-bottom:4px; }
    #help-box em { color:#9bb8e8; font-style:normal; font-weight:500; }
    #help-box strong { color:#eef4ff; }
    #help-close {
      margin-top:16px; width:100%; padding:7px;
      background:rgba(94,145,255,0.2); border:1px solid rgba(94,145,255,0.3);
      border-radius:8px; color:#eef4ff; cursor:pointer; font-size:14px;
    }
    #help-close:hover { background:rgba(94,145,255,0.35); }
    /* Icônes inline dans la fiche technique */
    .help-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
      vertical-align: middle;
      background: rgba(94,145,255,0.18);
      border: 1px solid rgba(140,180,255,0.30);
      border-radius: 6px;
      color: #b7c7ea;
      margin: 0 3px;
    }
    .help-icon svg { width: 14px; height: 14px; }
    .help-icon-text {
      display: inline-flex; align-items: center; justify-content: center;
      vertical-align: middle;
      background: rgba(94,145,255,0.18);
      border: 1px solid rgba(140,180,255,0.30);
      border-radius: 6px;
      color: #b7c7ea;
      font-size: 10px; font-weight: 700;
      padding: 2px 5px;
      margin: 0 3px;
      letter-spacing: 0.3px;
    }

    /* ── Slider ères géologiques ── */
    #erasTimeRange {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      border-radius: 999px;
      outline: none;
      cursor: pointer;
      background: var(--era-track, rgba(255,255,255,0.15));
    }
    #erasTimeRange::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: #eef4ff;
      border: 2px solid var(--era-thumb, #aaa);
      cursor: pointer;
      box-shadow: 0 0 6px rgba(0,0,0,0.4);
    }
    #erasTimeRange::-moz-range-thumb {
      width: 14px; height: 14px;
      border-radius: 50%;
      background: #eef4ff;
      border: 2px solid var(--era-thumb, #aaa);
      cursor: pointer;
    }

    /* Badge Ma affiché sur le slider */
    #erasMaBadge {
      display: inline-block;
      font-size: 13px; font-weight: 700;
      color: var(--era-thumb, #eef4ff);
      margin-top: 4px;
      letter-spacing: 0.5px;
    }
    #erasEraLabel {
      font-size: 10px;
      color: rgba(200,210,255,0.55);
      margin-top: 1px;
      font-style: italic;
    }


/* ── Menu commun (panneau gauche) ── */
#common-controls {
  margin-top: 10px;
  border-top: 1px solid rgba(160,190,255,0.15);
  padding-top: 10px;
}

/* Rangée d'icônes */
.common-icon-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Conteneur bouton + tooltip */
.ic-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Bouton icône */
.ic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: rgba(160,190,255,0.75);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  padding: 0;
  flex-shrink: 0;
}
.ic-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #eef4ff;
  border-color: rgba(160,190,255,0.30);
}
.ic-btn.active {
  background: rgba(94,145,255,0.30);
  border-color: rgba(140,180,255,0.50);
  color: #7dd3fc;
}
/* Axe actif → vert + halo */
#commonAxisToggleBtn.active {
  background: rgba(34,197,94,0.22);
  border-color: rgba(74,222,128,0.50);
  color: #4ade80;
  box-shadow:
    0 0 var(--halo-blur) var(--halo-spread) rgba(74,222,128, var(--halo-alpha-inner)),
    0 0 calc(var(--halo-blur) * 2.3) calc(var(--halo-spread) * 3) rgba(34,197,94, var(--halo-alpha-outer));
}
/* Cadenas fermé actif → vert + halo */
#commonAxisLockBtn.active {
  background: rgba(34,197,94,0.22);
  border-color: rgba(74,222,128,0.50);
  color: #4ade80;
  box-shadow:
    0 0 var(--halo-blur) var(--halo-spread) rgba(74,222,128, var(--halo-alpha-inner)),
    0 0 calc(var(--halo-blur) * 2.3) calc(var(--halo-spread) * 3) rgba(34,197,94, var(--halo-alpha-outer));
}
:root {
  --halo-blur: 4.55px;
  --halo-spread: 0.65px;
  --halo-alpha-inner: 0.273;
  --halo-alpha-outer: 0.156;
}
/* Nuages, Équateur, Rotation auto actifs → vert + halo lumineux */
.ic-btn.ic-green.active {
  background: rgba(34,197,94,0.22);
  border-color: rgba(74,222,128,0.50);
  color: #4ade80;
  box-shadow:
    0 0 var(--halo-blur) var(--halo-spread) rgba(74,222,128, var(--halo-alpha-inner)),
    0 0 calc(var(--halo-blur) * 2.3) calc(var(--halo-spread) * 3) rgba(34,197,94, var(--halo-alpha-outer));
}
/* Volcan / Météorite (Crise KT) actifs → rouge + halo */
.ic-btn.ic-red.active {
  background: rgba(220,38,38,0.28);
  border-color: rgba(248,113,113,0.55);
  color: #fca5a5;
  box-shadow:
    0 0 var(--halo-blur) var(--halo-spread) rgba(248,113,113, var(--halo-alpha-inner)),
    0 0 calc(var(--halo-blur) * 2.3) calc(var(--halo-spread) * 3) rgba(220,38,38, var(--halo-alpha-outer));
}
/* Bouton lecture en boucle (Voir les pôles) actif → vert + halo */
#polesLoopBtn.active {
  background: rgba(34,197,94,0.22);
  border-color: rgba(74,222,128,0.50);
  color: #4ade80;
  box-shadow:
    0 0 var(--halo-blur) var(--halo-spread) rgba(74,222,128, var(--halo-alpha-inner)),
    0 0 calc(var(--halo-blur) * 2.3) calc(var(--halo-spread) * 3) rgba(34,197,94, var(--halo-alpha-outer));
}
/* Bouton texte court (23°27') */
.ic-btn.ic-btn-text {
  width: auto;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(160,190,255,0.75);
  white-space: nowrap;
}
.ic-btn.ic-btn-text:hover { color: #eef4ff; }
/* Désactivé (nuages en mode climat) */
.ic-btn.disabled-mode {
  opacity: 0.30;
  cursor: not-allowed;
  pointer-events: none;
}
/* Masqué (équateur hors mode ères) */
.ic-btn-wrap.hidden-mode {
  display: none;
}

/* Tooltip */
.ic-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4,10,24,0.95);
  border: 1px solid rgba(160,190,255,0.22);
  color: #dbe6ff;
  font-size: 11px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 60;
}
.ic-btn-wrap:hover .ic-tooltip {
  opacity: 1;
}

/* Affichage inclinaison courante */
.common-tilt-display {
  font-size: 12px;
  color: rgba(160,190,255,0.55);
  margin-top: 7px;
  text-align: right;
}

/* Couleur reprise de l'ancien texte "Inclinaison : 23.45°",
   appliquée aux titres de sliders (rotation, vitesse, climat…) */
.label.slider-title { color: rgba(160,190,255,0.55); }

/* Panneau gauche scrollable si contenu trop long */
#panel-left {
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,190,255,0.2) transparent;
}
#panel-left, #panel-left * { box-sizing: border-box; }
#panel-left::-webkit-scrollbar { width: 4px; }
#panel-left::-webkit-scrollbar-thumb { background: rgba(160,190,255,0.2); border-radius: 4px; }
/* ── Menu OPE du mode Climat : un seul menu fixe sous les globes ──
   3 colonnes en miroir : boutons du globe gauche | libellé | globe droit. */
#opeMenu {
  position: fixed;
  left: 50%;
  bottom: 58px;                 /* au-dessus des curseurs Hauteur / Écartement */
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 6px 12px;
  background: rgba(4,10,24,0.78);
  border: 1px solid rgba(160,190,255,0.15);
  border-radius: 12px;
  padding: 8px 12px;
  pointer-events: all;
  z-index: 26;
}
.ope-head  { font-size: 12px; font-weight: 700; color: #7dd3fc; }
.ope-head.ope-r { color: #f87171; }
.ope-head.ope-l { text-align: right; }
.ope-label {
  font-size: 12px;
  color: rgba(160,190,255,0.7);
  text-align: center;
  white-space: nowrap;
  min-width: 78px;
}
.ope-btns { display: flex; align-items: center; gap: 4px; }
.ope-btns.ope-l { justify-content: flex-end; }
#opeMenu .btn { font-size: 12px; padding: 4px 7px; min-width: 32px; }
#opeMenu .btn.exc-btn { padding: 1px 2px; line-height: 0; }
.exc-orbit { width: 56px; height: 30px; display: block; }
/* ── Sliders panneaux gauche/droit/paramètres — Modèle B+H ── */
#panel-left  input[type="range"],
#panel-right input[type="range"],
#panel-settings input[type="range"],
#ocean-dock input[type="range"],
#globe-controls-overlay input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(90deg,
    rgba(94,145,255,0.75) var(--p, 0%),
    rgba(255,255,255,0.12) var(--p, 0%)
  );
}
#panel-left  input[type="range"]::-webkit-slider-thumb,
#panel-right input[type="range"]::-webkit-slider-thumb,
#panel-settings input[type="range"]::-webkit-slider-thumb,
#ocean-dock input[type="range"]::-webkit-slider-thumb,
#globe-controls-overlay input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 9px;
  border-radius: 999px;
  background: #5e91ff;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(94,145,255,0.35), 0 0 2px rgba(94,145,255,0.25);
}
#panel-left  input[type="range"]::-moz-range-thumb,
#panel-right input[type="range"]::-moz-range-thumb,
#panel-settings input[type="range"]::-moz-range-thumb,
#ocean-dock input[type="range"]::-moz-range-thumb,
#globe-controls-overlay input[type="range"]::-moz-range-thumb {
  width: 16px; height: 7px;
  border-radius: 999px;
  background: #5e91ff;
  border: none;
  cursor: pointer;
}


/* ── En-tête rotation (label + icône sur la même ligne) ── */
.common-rot-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.common-rot-header .label { margin-bottom: 0; }

/* ── Mini-menu central ── */
#center-toolbar {
  position: fixed;
  top: 14px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(4,10,24,0.82);
  border: 1px solid rgba(160,190,255,0.18);
  border-radius: 14px;
  padding: 6px 10px;
  z-index: 40;
  backdrop-filter: blur(8px);
}
#center-toolbar .ic-tooltip {
  top: calc(100% + 8px);
  bottom: auto;
}

/* ── Transitions glissement des panneaux ── */
#panel-left, #panel-right {
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s;
}
#panel-left.panels-hidden  { transform: translateX(-110%); opacity: 0; pointer-events: none; }
#panel-right.panels-hidden { transform: translateX(110%);  opacity: 0; pointer-events: none; }

/* ── Boutons flottants d'ouverture des menus (affichés en mode tiroir) ── */
.panel-fab {
  display: none;
  position: fixed;
  top: 10px;
  z-index: 45;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: rgba(4,10,24,0.85);
  border: 1px solid rgba(160,190,255,0.22);
  border-radius: 11px;
  color: rgba(200,220,255,0.92);
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}
.panel-fab-left  { left: 10px; }
.panel-fab-right { right: 10px; }
.panel-fab.active {
  background: rgba(94,145,255,0.92);
  border-color: rgba(94,145,255,0.92);
  color: #fff;
}

/* ── Taille variable des menus (zoom) ── */
:root { --panel-fs: 13px; }
#panel-left, #panel-right, #panel-settings { font-size: var(--panel-fs); }
#panel-left .btn, #panel-right .btn, #panel-settings .btn,
#panel-left .label, #panel-right .label, #panel-settings .label,
#panel-left .value, #panel-right .value, #panel-settings .value,
#panel-left .ic-btn, #panel-right .ic-btn, #panel-settings .ic-btn { font-size: var(--panel-fs); }
#panel-settings .settings-title { font-size: var(--panel-fs); }

/* ── Blocs panneau gauche ── */
.left-bloc {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(160,190,255,0.12);
  border-radius: 12px;
  padding: 10px 10px 8px;
  margin-bottom: 10px;
}
.left-bloc-label {
  display: block;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(160,190,255,0.40);
  margin-bottom: 8px;
}
#common-controls {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* ── Panneau paramètres ── */
#panel-settings {
  position: fixed;
  right: 14px;
  top: 14px;
  width: 220px;
  z-index: 30;
  display: none;
  background: linear-gradient(180deg,rgba(8,16,36,0.97),rgba(4,10,24,0.95));
  border: 1px solid rgba(160,190,255,0.18);
  border-radius: 16px;
  padding: 14px 12px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,190,255,0.2) transparent;
  transform: translateX(calc(100% + 20px));
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s;
}
#panel-settings.visible {
  display: block;
}
#panel-settings.open {
  transform: translateX(0);
  opacity: 1;
}
.settings-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.settings-title {
  font-size: 13px;
  font-weight: 700;
  color: #dbe6ff;
  letter-spacing: 0.5px;
}

/* Séparateur toolbar */
#center-toolbar > div[style*="1px"] {
  flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════
   RESPONSIVE — écrans scolaires variés + tablettes 10 pouces
   100 % CSS : les globes et les menus climat/KT se repositionnent
   déjà seuls (recul de caméra + projection 3D en JS). On adapte
   ici les panneaux latéraux, les overlays du bas et l'échelle de
   police. Le zoom manuel (+/–) continue de primer (style inline).
   ════════════════════════════════════════════════════════════ */

/* ── Palier 1 : ≤ 1280px — tablettes 10" paysage, écrans 1024–1280 ── */
@media (max-width: 1280px) {
  :root { --panel-fs: 12px; }
  .panel { padding: 11px; top: 10px; border-radius: 12px; }
  #panel-left  { left: 10px;  width: 212px; }
  #panel-right { right: 10px; width: 212px; }
  .left-header h1 { font-size: 15px; }
  #globe-controls-overlay { gap: 7px; }
  #globe-controls-overlay input[type="range"] { width: 96px !important; }
}

/* ── Palier 2 : ≤ 920px — tablettes 10" portrait, petits écrans ── */
@media (max-width: 920px) {
  :root { --panel-fs: 11.5px; }
  .panel { padding: 9px; }
  #panel-left  { left: 8px;  width: 188px; }
  #panel-right { right: 8px; width: 188px; }
  .left-bloc { padding: 8px 8px 6px; margin-bottom: 8px; }
  .left-header h1 { font-size: 14px; }
  .app-logo { width: 24px; height: 24px; }
  /* Menu Climat réduit pour passer entre les deux panneaux */
  #opeMenu { transform: translateX(-50%) scale(0.74); transform-origin: 50% 100%; }
  /* Curseurs du bas : autoriser le retour à la ligne pour ne pas déborder */
  #globe-controls-overlay { flex-wrap: wrap; justify-content: center; max-width: 94vw; bottom: 6px; }
  /* La frise remonte au-dessus des curseurs (qui peuvent passer sur 2 lignes) */
  #eras-frise-overlay { width: 76%; bottom: 104px; }
}

/* ── Palier 3 : ≤ 620px — petits écrans : MODE TIROIR ── */
/* Les deux panneaux sont masqués par défaut (état initial posé en JS) et
   chacun s'ouvre via son bouton flottant (un seul à la fois). Toucher la
   scène referme le tiroir. */
@media (max-width: 620px) {
  /* Menu Climat : panneaux en tiroir, le menu tient dans la largeur du téléphone */
  #opeMenu { transform: translateX(-50%) scale(0.68); transform-origin: 50% 100%; bottom: 92px; }
  :root { --panel-fs: 11px; }
  .panel-fab { display: flex; }            /* afficher les 2 boutons */
  #togglePanelsWrap { display: none; }     /* le bouton « tout masquer » est remplacé par les 2 boutons */
  #panel-left, #panel-right {
    width: min(86vw, 300px);
    z-index: 44;          /* au-dessus des overlays lorsque le tiroir est ouvert */
    padding-top: 50px;    /* dégage le bouton flottant placé en haut */
  }
  .left-header h1 { font-size: 13px; }
  #globe-controls-overlay input[type="range"] { width: 78px !important; }
}

/* ── Mode « PC lent » (app/lite.js) ──
   Le flou derrière les panneaux coûte cher à la carte graphique : retiré. */
.pc-lent * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Message du mode PC lent, en haut de l'écran */
#lite-notice {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 90;
  box-sizing: border-box; max-width: min(560px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-radius: 10px;
  background: rgba(8,16,36,0.95); border: 1px solid rgba(160,190,255,0.30);
  color: #e8eefc; font-size: 13px; line-height: 1.4;
  box-shadow: 0 8px 30px rgba(0,0,0,0.40);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
#lite-notice.visible { opacity: 1; pointer-events: auto; }
#lite-notice button {
  flex: none; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  background: rgba(94,145,255,0.92); border: 1px solid rgba(160,190,255,0.40);
  color: #fff; font: inherit; font-weight: 700;
}