:root {
    --void: #04090f;
    --surface: #071120;
    --panel: #0c1a2e;
    --card: #0e1e34;
    --card-inner: #091526;
    --border: #172d4a;
    --border-bright: #254868;
    --gold: #e8c060;
    --gold-dim: #9a7828;
    --cyan: #52ddd4;
    --cyan-dim: #1e6e6a;
    --rose: #f07090;
    --mint: #72e09e;
    --blue-star: #82bef0;
    --text: #d0e4f8;
    --text-dim: #8090a8;
    --text-muted: #566880;
    --text-bright: #f0f8ff;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    background: #04090f !important;
    background-color: #04090f !important;
  }

  body {
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }

  #starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #04090f;
  }

  .app {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 60px;
    background: transparent;
  }

  /* NEBULA GLOW */
  .nebula-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 80% 40% at 15% 20%, rgba(26,58,110,0.08) 0%, transparent 70%),
      radial-gradient(ellipse 60% 50% at 85% 70%, rgba(45,26,78,0.10) 0%, transparent 70%),
      radial-gradient(ellipse 40% 30% at 50% 50%, rgba(78,205,196,0.02) 0%, transparent 60%);
  }

  .app {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 60px;
  }

  /* HEADER */
  header {
    padding: 40px 0 32px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
    position: relative;
  }

  header::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(26px, 4vw, 46px);
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 2px;
    line-height: 1.1;
    margin-bottom: 10px;
    text-shadow: 0 0 40px rgba(77,212,204,0.25);
  }

  .subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--cyan);
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .coords {
    display: inline-flex;
    gap: 24px;
    margin-top: 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 2px;
    opacity: 0.6;
  }

  .coords span { opacity: 1; }

  /* CONTROLS */
  .controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
    min-width: 0;
  }

  .controls-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .controls-row-inner {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .month-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    width: 100%;
  }

  .month-btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 7px 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .month-btn:hover {
    color: var(--text);
    border-color: var(--border-bright);
    background: var(--card);
  }

  .month-btn.active {
    background: rgba(232,192,96,0.15);
    border-color: var(--gold);
    color: var(--gold);
  }

  .season-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    padding: 4px 10px;
    border-left: 2px solid var(--border-bright);
    margin-left: 4px;
    align-self: center;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .filter-row {
    display: flex;
    gap: 5px;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    flex-wrap: nowrap;
  }

  .filter-row::-webkit-scrollbar { display: none; }

  .filter-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 4px;
  }

  .orient-btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .orient-btn:hover { color: var(--cyan); border-color: var(--cyan-dim); background: var(--card); }
  .orient-btn.active { background: rgba(82,221,212,0.14); border-color: var(--cyan); color: var(--cyan); }

  .type-btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .type-btn:hover { color: var(--text); border-color: var(--border-bright); background: var(--card); }
  .type-btn.active { background: rgba(232,192,96,0.14); border-color: var(--gold); color: var(--gold); }

  .diff-filter-btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .diff-filter-btn:hover { color: var(--text); border-color: var(--border-bright); background: var(--card); }
  .diff-filter-btn.active-all    { background: rgba(208,228,248,0.08); border-color: var(--text-dim); color: var(--text); }
  .diff-filter-btn.active-facile { background: rgba(114,224,158,0.14); border-color: var(--mint); color: var(--mint); }
  .diff-filter-btn.active-moyen  { background: rgba(232,192,96,0.14); border-color: var(--gold); color: var(--gold); }
  .diff-filter-btn.active-avance { background: rgba(240,112,144,0.14); border-color: var(--rose); color: var(--rose); }

  /* SEASON BADGE */
  .season-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
  }

  .season-badge {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    color: var(--text-bright);
    letter-spacing: 1px;
  }

  .season-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    padding: 3px 10px;
    border: 1px solid;
    text-transform: uppercase;
  }

  .tag-hiver     { border-color: var(--blue-star); color: var(--blue-star); background: rgba(106,174,237,0.08); }
  .tag-printemps { border-color: var(--mint);      color: var(--mint);      background: rgba(109,218,150,0.08); }
  .tag-ete       { border-color: var(--gold);      color: var(--gold);      background: rgba(232,180,74,0.08); }
  .tag-automne   { border-color: var(--rose);      color: var(--rose);      background: rgba(240,96,128,0.08); }

  /* GRID */
  .objects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
  }

  /* FLIP CARD WRAPPER */
  .card-wrap {
    perspective: 1000px;
    animation: fadeSlide 0.4s ease both;
    cursor: pointer;
  }

  @keyframes fadeSlide {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .card-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Quand la card est retournée avec une photo plein écran,
     forcer la hauteur minimale pour que la photo s'étende */
  .card-wrap.flipped .card-back.photo-only {
    min-height: 100%;
  }

  .card-wrap.flipped .card-inner {
    transform: rotateY(180deg);
  }

  /* FRONT */
  .obj-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 20px;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: border-color 0.25s, background 0.25s;
    width: 100%;
  }

  .card-wrap:not(.flipped):hover .obj-card {
    border-color: var(--border-bright);
    background: var(--panel);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  }

  /* BACK — same size as front via absolute inset */
  .card-back {
    position: absolute;
    inset: 0;
    background: var(--card-inner);
    border: 1px solid var(--border-bright);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .card-back-img {
    width: 100%;
    flex: 1;
    object-fit: cover;
    display: block;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* Zone photo importable */
  .card-photo-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
  }

  .card-photo-wrap:hover .photo-import-btn { opacity: 1; }

  .photo-import-btn {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(4,9,15,0.65);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.8);
    width: 34px; height: 34px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s;
    z-index: 10;
    user-select: none;
    padding: 0;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .photo-import-btn:hover,
  .photo-import-btn:active { background: rgba(4,9,15,0.95); border-color: white; opacity: 1 !important; color: white; }
  .card-photo-wrap:hover .photo-import-btn { opacity: 0.85; }
  /* Sur mobile : les boutons photo sont toujours visibles */
  @media (hover: none) {
    .photo-import-btn, .photo-delete-btn { opacity: 0.7 !important; }
    /* Un seul tap suffit pour flipper la card sur mobile */
    .card-photo-wrap { cursor: pointer; }
  }

  .photo-publish-btn {
    position: absolute;
    bottom: 8px; right: 92px;
    background: rgba(4,9,15,0.65);
    border: 1px solid rgba(94,255,216,0.35);
    color: rgba(94,255,216,0.8);
    width: 34px; height: 34px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
    z-index: 10;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .photo-publish-btn:hover,
  .photo-publish-btn:active { background: rgba(4,9,15,0.95); border-color: var(--mint); opacity: 1 !important; }
  .card-photo-wrap:hover .photo-publish-btn { opacity: 0.85; }
  @media (hover: none) { .photo-publish-btn { opacity: 0.7 !important; } }

  .photo-delete-btn {
    position: absolute;
    bottom: 8px; right: 50px;
    background: rgba(4,9,15,0.65);
    border: 1px solid rgba(240,112,144,0.35);
    color: var(--rose);
    width: 34px; height: 34px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 10;
    user-select: none;
    padding: 0;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .photo-delete-btn:hover,
  .photo-delete-btn:active { background: rgba(240,112,144,0.18); border-color: var(--rose); opacity: 1 !important; }
  .card-photo-wrap:hover .photo-delete-btn { opacity: 0.85; }

  .card-back-dual {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 2px;
    overflow: hidden;
  }

  .card-back-dual img {
    flex: 1;
    width: 50%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .obj-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
  }

  .card-galaxy::before { background: linear-gradient(90deg, transparent, #4a90d9, transparent); }
  .card-nebuleuse::before { background: linear-gradient(90deg, transparent, var(--rose), transparent); }
  .card-amas::before { background: linear-gradient(90deg, transparent, var(--mint), transparent); }
  .card-globulaire::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
  .card-planete::before { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }

  .card-corner {
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 40px;
    overflow: hidden;
    opacity: 0.5;
  }
  .card-corner::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent var(--corner-color, var(--gold)) transparent transparent;
  }
  /* Couleur du coin selon le type d'objet */
  .card-galaxy    { --corner-color: var(--blue-star); }
  .card-nebuleuse { --corner-color: var(--rose); }
  .card-amas      { --corner-color: var(--mint); }
  .card-globulaire{ --corner-color: var(--gold); }
  .card-planete   { --corner-color: var(--cyan); }

  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .obj-name {
    font-family: 'Cinzel', serif;
    font-size: 17px;
    color: var(--text-bright);
    letter-spacing: 0.5px;
  }

  .obj-cat {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 1px;
    margin-top: 3px;
  }

  .obj-type-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 3px 8px;
    border: 1px solid;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .badge-galaxy { border-color: var(--blue-star); color: var(--blue-star); background: rgba(106,174,237,0.08); }
  .badge-nebuleuse { border-color: var(--rose); color: var(--rose); background: rgba(240,96,128,0.08); }
  .badge-amas { border-color: var(--mint); color: var(--mint); background: rgba(109,218,150,0.08); }
  .badge-globulaire { border-color: var(--gold); color: var(--gold); background: rgba(232,180,74,0.08); }
  .badge-planete { border-color: var(--cyan); color: var(--cyan); background: rgba(77,212,204,0.08); }

  .card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .stat-item {
    background: var(--card-inner);
    padding: 9px 11px;
    border-left: 2px solid var(--border-bright);
  }

  .stat-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-bright);
  }

  .stat-value .orient-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
  }

  .stat-value .orient-icon svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  .card-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 4px;
  }

  .difficulty {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
  }

  .diff-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--card-inner);
    border: 1px solid var(--border-bright);
  }

  .diff-dot.lit-facile { background: var(--mint); border-color: var(--mint); }
  .diff-dot.lit-moyen  { background: var(--gold); border-color: var(--gold); }
  .diff-dot.lit-avance { background: var(--rose); border-color: var(--rose); }

  .diff-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--text);
    margin-left: 5px;
    text-transform: uppercase;
  }

  .note {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-dim);
    line-height: 1.4;
    flex: 1;
    text-align: right;
  }

  /* COMPASS */

  /* ELEVATION BAR */
  .elev-bar-wrap {
    margin-bottom: 12px;
  }
  .elev-bar-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
  }
  .elev-bar-label span:last-child {
    color: var(--text);
    font-size: 10px;
  }

  .elev-track {
    height: 5px;
    background: rgba(255,255,255,0.06);
    position: relative;
    border-radius: 2px;
  }

  .elev-fill {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  }

  /* BEST WINDOW */
  .time-window {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .time-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .time-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
  }

  .time-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(232,180,74,0.5), rgba(232,180,74,0.9));
    border-radius: 3px;
    transition: all 0.3s;
  }

  .time-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--gold);
    white-space: nowrap;
  }

  /* EMPTY STATE */
  .empty-state {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px;
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 2px;
  }

  /* LEGEND */
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    margin-bottom: 24px;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text);
    text-transform: uppercase;
  }

  /* Triangle de type — remplace les ronds de la légende */
  .legend-tri {
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 7px 12px 7px;
    border-color: transparent transparent currentColor transparent;
    flex-shrink: 0;
  }

  /* INFO BAR */
  .info-bar {
    background: rgba(232,192,96,0.04);
    border: 1px solid rgba(232,192,96,0.15);
    border-left: 3px solid var(--gold-dim);
    padding: 12px 18px;
    margin-top: 32px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;
  }

  .info-bar strong { color: var(--gold); font-weight: 600; }

  /* ===== MÉTÉO ===== */
  .weather-panel {
    background: var(--card);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    overflow: hidden;
  }

  .weather-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
  }

  .weather-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--text-dim);
    text-transform: uppercase;
  }

  .weather-title span {
    color: var(--cyan);
  }

  .weather-loading {
    padding: 24px 18px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
  }

  /* ── Slider météo mobile ──────────────────────────────────────────── */
  .weather-days-wrap { position: relative; }

  .weather-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
  }

  /* Dots de pagination (injectés par JS, visibles mobile uniquement) */
  .weather-dots {
    display: none;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 4px;
  }
  .weather-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--border-bright);
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
    border: none;
    padding: 0;
  }
  .weather-dot.active { background: var(--cyan); transform: scale(1.4); }

  .weather-day {
    padding: 14px 8px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: background 0.2s;
    cursor: pointer;
    overflow: visible;
  }

  .weather-day:last-child { border-right: none; }

  .weather-day.good-night { background: rgba(82,221,212,0.05); }
  .weather-day.bad-night  { background: rgba(240,112,144,0.04); }
  .weather-day.ok-night   { background: rgba(232,192,96,0.04); }
  .weather-day.wday-tapped { outline: 1px solid var(--cyan); }

  @media (max-width: 700px) {
    .weather-days-wrap { overflow: hidden; padding-bottom: 32px; margin-bottom: -32px; }
    .weather-days {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 0;
    }
    .weather-days::-webkit-scrollbar { display: none; }
    .weather-day {
      flex: 0 0 31%;
      min-width: 31%;
      scroll-snap-align: start;
    }
    .weather-dots { display: flex; }
  }

  @media (max-width: 420px) {
    .weather-day { flex: 0 0 47%; min-width: 47%; padding: 10px 6px; gap: 5px; }
    .obs-score { font-size: 8px; padding: 2px 4px; }
  }

  .wday-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .wday-date {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1;
  }

  /* Moon disc */
  .moon-disc-wrap {
    position: relative;
    width: 32px;
    height: 32px;
  }

  .moon-disc-wrap canvas {
    width: 32px;
    height: 32px;
  }

  .moon-pct {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--gold);
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Cloud bar */
  .cloud-bar-wrap {
    width: 100%;
  }

  .cloud-track {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
  }

  .cloud-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
  }

  .cloud-fill.clear  { background: var(--mint); }
  .cloud-fill.partly { background: var(--gold); }
  .cloud-fill.cloudy { background: var(--rose); }

  .cloud-pct {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 3px;
    text-align: center;
    display: block;
    letter-spacing: 0;
    white-space: nowrap;
  }

  @media (max-width: 700px) {
    .wday-date { font-size: 11px; white-space: nowrap; }
    .wday-label { font-size: 8px; letter-spacing: 0; }
    .moon-disc-wrap { width: 26px; height: 26px; }
    .moon-disc-wrap canvas { width: 26px; height: 26px; }
    .moon-pct { font-size: 8px; }
    .cloud-pct { font-size: 8px; }
    .obs-score { font-size: 7px; padding: 2px 3px; letter-spacing: 0; }
    .night-bars { height: 28px; }
  }

  /* Hourly night bars */
  .night-bars {
    display: flex;
    gap: 1px;
    align-items: flex-end;
    width: 100%;
    height: 32px;
  }

  .night-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 100%;
  }

  .night-bar-track {
    flex: 1;
    width: 100%;
    background: rgba(255,255,255,0.05);
    border-radius: 1px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    min-height: 0;
  }

  .night-bar-fill {
    width: 100%;
    border-radius: 1px 1px 0 0;
    transition: height 0.4s ease;
  }

  .night-bar-fill.clear  { background: var(--mint); }
  .night-bar-fill.partly { background: var(--gold); }
  .night-bar-fill.cloudy { background: var(--rose); }

  /* Score badge */
  .obs-score {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 6px;
    border: 1px solid;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    margin-top: auto;
  }
  .score-top  { color: var(--mint); border-color: var(--mint); background: rgba(114,224,158,0.1); }
  .score-ok   { color: var(--gold); border-color: var(--gold); background: rgba(232,192,96,0.1); }
  .score-bad  { color: var(--rose); border-color: var(--rose); background: rgba(240,112,144,0.1); }

  /* ── Panneau données avancées astrophoto ──────────────────────────── */
  .adv-panel {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-bottom: 3px;
    border-top: 1px solid var(--border);
    padding-top: 4px;
  }
  .adv-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    color: var(--text-dim);
    white-space: nowrap;
    line-height: 1.2;
  }
  .adv-item.adv-warn { color: var(--gold); }
  .adv-icon { font-size: 8px; flex-shrink: 0; }
  .adv-val  { font-size: 8px; }
  .adv-alert {
    font-size: 7px;
    color: var(--rose);
    border: 1px solid var(--rose);
    padding: 0 3px;
    border-radius: 2px;
    margin-left: 2px;
    letter-spacing: 0.5px;
  }

  .weather-error {
    padding: 16px 18px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--rose);
    letter-spacing: 2px;
    text-align: center;
  }

  /* COUNT */
  .result-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: 16px;
    text-transform: uppercase;
  }

  .result-count span { color: var(--cyan); }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--void); }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  /* ===== VILLE ===== */
  .city-bar { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); padding:10px 16px; margin-bottom:8px; }
  .city-label { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
  .city-input { flex:1; background:transparent; border:none; border-bottom:1px solid var(--border-bright); color:var(--text-bright); font-family:'Rajdhani',sans-serif; font-weight:600; font-size:16px; padding:2px 6px; outline:none; transition:border-color 0.2s; min-width:0; }
  .city-input:focus { border-color:var(--cyan); }
  .city-input::placeholder { color:var(--text-muted); font-weight:400; }
  .city-name-display { font-family:'Cinzel',serif; font-size:13px; color:var(--gold); letter-spacing:1px; white-space:nowrap; flex-shrink:0; display:none; }
  @media (min-width:700px) { .city-name-display { display:block; } }
  .city-btn { background:var(--panel); border:1px solid var(--border); color:var(--text-dim); font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:1px; padding:6px 14px; cursor:pointer; transition:all 0.2s; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
  .city-btn-ok { background:rgba(232,192,96,0.1); border-color:var(--gold-dim); color:var(--gold); }
  .city-btn-ok:hover { background:rgba(232,192,96,0.2); border-color:var(--gold); }
  .city-btn-gps { background:rgba(82,221,212,0.1); border-color:var(--cyan-dim); color:var(--cyan); }
  .city-btn-gps:hover { background:rgba(82,221,212,0.2); border-color:var(--cyan); }
  .city-status { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:1px; white-space:nowrap; flex-shrink:0; }
  .city-status.ok { color:var(--mint); } .city-status.err { color:var(--rose); } .city-status.loading { color:var(--gold); }

  /* ===== ÉCLAIRAGE PUBLIC ===== */
  .lights-bar { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-left:3px solid var(--gold-dim); padding:10px 16px; cursor:pointer; transition:all 0.25s; user-select:none; margin-bottom:0; }
  .lights-bar.on { border-left-color:var(--mint); background:rgba(114,224,158,0.04); }
  .lights-text { flex:1; display:flex; flex-direction:column; gap:2px; }
  .lights-main { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:14px; color:var(--text); }
  .lights-sub { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--text-dim); }
  .lights-sub strong { color:var(--gold); }
  .lights-bar.on .lights-sub strong { color:var(--mint); }
  .lights-arrow { font-size:12px; color:var(--text-muted); transition:transform 0.25s; flex-shrink:0; }
  .lights-bar.on .lights-arrow { transform:rotate(90deg); color:var(--mint); }
  /* Ampoule ALLUMEE par defaut (eclairage public ON) */
  .lights-bulb { flex-shrink:0; width:28px; transition:filter 0.3s; filter:drop-shadow(0 0 5px rgba(232,192,96,0.4)); }
  .lights-bulb .bulb-glass { fill:rgba(232,192,96,0.2); stroke:var(--gold); stroke-width:1.5; transition:all 0.3s; }
  .lights-bulb .bulb-base1,.lights-bulb .bulb-base2 { fill:var(--gold); transition:all 0.3s; }
  .lights-bulb .bulb-base3 { fill:#9a7020; transition:all 0.3s; }
  .lights-bulb .bulb-filament { stroke:#fff8a0; stroke-linecap:round; transition:all 0.3s; }
  /* Ampoule ETEINTE (eclairage coupe = ON) */
  .lights-bar.on .lights-bulb { filter:none; }
  .lights-bar.on .lights-bulb .bulb-glass { fill:var(--surface); stroke:var(--text-muted); }
  .lights-bar.on .lights-bulb .bulb-base1,.lights-bar.on .lights-bulb .bulb-base2 { fill:var(--border-bright); }
  .lights-bar.on .lights-bulb .bulb-base3 { fill:var(--border); }
  .lights-bar.on .lights-bulb .bulb-filament { stroke:var(--text-muted); }
  /* Panel expandable */
  .lights-expand { display:none; border:1px solid var(--border); border-top:none; background:var(--surface); }
  .lights-expand.open { display:block; }
  .lights-wrap { margin-bottom:16px; }
  /* Night bar tooltip */
  .night-bar-col { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; height:100%; cursor:pointer; }
  .night-bar-col:hover::after { content:attr(data-hour); position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--border-bright); color:var(--text); font-family:'Share Tech Mono',monospace; font-size:9px; padding:2px 5px; white-space:nowrap; z-index:10; pointer-events:none; }

  /* Bandeau "prise" sur le recto */
  .card-taken-badge {
    position: absolute;
    top: 10px; left: -1px;
    background: var(--mint);
    color: #03080e;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 3px 10px 3px 8px;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* Badge éclipse */
  .card-eclipse-badge {
    position: absolute;
    top: 10px; right: -1px;
    background: linear-gradient(135deg, #ff8c00, #ffcc00);
    color: #1a0800;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 8px 3px 10px;
    text-transform: uppercase;
    clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
    z-index: 2;
    animation: eclipsePulse 2s ease-in-out infinite;
  }
  @keyframes eclipsePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
  }

  /* lights-wrap en bas : pas de margin-bottom mais margin-top */
  .lights-wrap { margin-bottom: 0; }

  /* Légère teinte verte sur les cards déjà prises */
  .obj-card.is-taken {
    border-color: rgba(114,224,158,0.3);
  }
  .obj-card.is-taken::before {
    background: linear-gradient(90deg, transparent, var(--mint), transparent) !important;
  }

  /* Filtre catégorie */
  .categ-btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .categ-btn:hover { color: var(--text); border-color: var(--border-bright); }
  .categ-btn.active-incontournables { background: rgba(232,192,96,0.12); border-color: var(--gold); color: var(--gold); }
  .categ-btn.active-messier { background: rgba(82,221,212,0.10); border-color: var(--cyan); color: var(--cyan); }
  .categ-btn.active-ngc { background: rgba(114,224,158,0.10); border-color: var(--mint); color: var(--mint); }
  .categ-btn.active-ic  { background: rgba(240,112,144,0.10); border-color: var(--rose); color: var(--rose); }
  .categ-btn.active-planetes { background: rgba(82,221,212,0.12); border-color: var(--cyan); color: var(--cyan); }
  .categ-btn.active-all { background: rgba(208,228,248,0.07); border-color: var(--text-dim); color: var(--text); }
  .photo-filter-btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .photo-filter-btn:hover { color: var(--mint); border-color: rgba(114,224,158,0.4); }
  .photo-filter-btn.active-taken { background: rgba(114,224,158,0.12); border-color: var(--mint); color: var(--mint); }
  .photo-filter-btn.active-not-taken { background: rgba(82,221,212,0.1); border-color: var(--cyan); color: var(--cyan); }
  .photo-filter-btn.active-all { background: rgba(208,228,248,0.07); border-color: var(--text-dim); color: var(--text); }
  /* ── Indicateur de visibilité simplifié ─────────────────────────────── */
  .vis-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    margin-top: 4px;
  }
  .vis-indicator:hover { filter: brightness(1.3); border-color: var(--border-bright); }
  .vis-indicator.vis-good  { background: rgba(114,224,158,0.06); border-color: rgba(114,224,158,0.3); }
  .vis-indicator.vis-ok    { background: rgba(232,192,96,0.06);  border-color: rgba(232,192,96,0.3); }
  .vis-indicator.vis-bad   { background: rgba(240,112,144,0.06); border-color: rgba(240,112,144,0.3); }
  .vis-dot   { font-size: 9px; flex-shrink: 0; }
  .vis-label { font-family: 'Share Tech Mono', monospace; font-size: 7px; letter-spacing: 0.5px; color: var(--text-dim); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vis-score { font-family: 'Share Tech Mono', monospace; font-size: 8px; color: var(--text-dim); flex-shrink: 0; }

  /* ── Modal visibilité détaillé ───────────────────────────────────────── */
  .vis-modal {
    position: fixed; inset: 0;
    background: rgba(2,5,13,0.92);
    z-index: 2100;
    display: none;
    align-items: flex-end;
    justify-content: center;
  }
  .vis-modal.open { display: flex; }

  .vis-modal-panel {
    background: var(--panel);
    border: 1px solid var(--border-bright);
    border-bottom: none;
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    animation: slideUpVis 0.25s ease;
  }
  @keyframes slideUpVis { from{transform:translateY(100%)} to{transform:translateY(0)} }

  .vis-modal-header {
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .vis-modal-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .vm-big-dot { font-size: 22px; flex-shrink: 0; }
  .vm-title   { font-family: 'Cinzel', serif; font-size: 14px; color: var(--text-bright); }
  .vm-subtitle{ font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--text-dim); margin-top: 2px; }
  .vm-score-wrap { margin-left: auto; text-align: right; flex-shrink: 0; }
  .vm-score-val  { display: block; font-family: 'Share Tech Mono', monospace; font-size: 18px; font-weight: bold; }
  .vm-score-val.vm-good  { color: var(--mint); }
  .vm-score-val.vm-ok    { color: var(--gold); }
  .vm-score-val.vm-bad   { color: var(--rose); }
  .vm-score-lbl  { font-family: 'Share Tech Mono', monospace; font-size: 8px; letter-spacing: 1px; color: var(--text-dim); }

  .vis-modal-body {
    padding: 12px 14px 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  .vm-section-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  /* Barres horaires */
  .vm-bars {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .vm-bar-col {
    flex: 1;
    min-width: 52px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 4px;
  }
  .vm-bar-hour {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--cyan);
    text-align: center;
    font-weight: bold;
    margin-bottom: 2px;
  }
  .vm-metrics { display: flex; flex-direction: column; gap: 4px; }
  .vm-metric  {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    color: var(--text-dim);
  }
  .vm-metric.vm-warn { color: var(--gold); }
  .vm-metric-icon { font-size: 8px; flex-shrink: 0; width: 10px; }
  .vm-metric-val  { font-size: 8px; white-space: nowrap; }
  .vm-mini-bar-track {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
    min-width: 20px;
  }
  .vm-mini-bar { height: 100%; border-radius: 2px; }
  .vm-mini-bar.clear  { background: var(--mint); }
  .vm-mini-bar.partly { background: var(--gold); }
  .vm-mini-bar.cloudy { background: var(--rose); }

  /* Tableau récap */
  .vm-table { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
  .vm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 3px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
  }
  .vm-row-label { color: var(--text-dim); }
  .vm-row-val   { color: var(--text); font-weight: bold; }
  .vm-row-val.vm-warn { color: var(--gold); }

  .vis-modal-footer {
    padding: 10px 16px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .vis-modal-close {
    width: 100%;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 10px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
  }
  .vis-modal-close:hover { border-color: var(--rose); color: var(--rose); }
  /* ── Modal météo plein écran ─────────────────────────────────────── */
  .weather-hour-modal {
    position:fixed; inset:0;
    background:rgba(2,5,13,0.95);
    z-index:2000; display:none;
    align-items:flex-end; justify-content:center;
  }
  .weather-hour-modal.open { display:flex; }
  .weather-hour-panel {
    background:var(--panel);
    border:1px solid var(--border-bright);
    border-bottom:none;
    width:100%; max-width:640px;
    max-height:90vh;
    display:flex; flex-direction:column;
    overflow:hidden;
    animation:slideUpW 0.28s cubic-bezier(.2,.8,.4,1);
  }
  @keyframes slideUpW { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }

  /* En-tête compact */
  .wh-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    gap:10px;
  }
  .wh-header-left { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .wh-title { font-family:'Cinzel',serif; font-size:14px; color:var(--text-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wh-subtitle { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:2px; color:var(--text-dim); }
  .wh-score-badge {
    flex-shrink:0;
    display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    border-radius:4px;
    padding:6px 10px;
  }
  .wh-score-dot { font-size:16px; line-height:1; }
  .wh-score-txt { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--text-dim); line-height:1.4; }
  .wh-score-val { font-size:13px; font-weight:bold; display:block; color:var(--text-bright); }
  .wh-close {
    background:none; border:1px solid var(--border);
    color:var(--text-dim);
    font-family:'Share Tech Mono',monospace; font-size:11px;
    padding:6px 12px; cursor:pointer; flex-shrink:0;
    transition:all 0.15s;
  }
  .wh-close:hover { border-color:var(--rose); color:var(--rose); }

  /* Corps scrollable */
  .wh-body { flex:1; overflow-y:auto; min-height:0; padding:0; }

  .wh-section-label {
    font-family:'Share Tech Mono',monospace;
    font-size:8px; letter-spacing:2px;
    color:var(--text-muted); text-transform:uppercase;
    margin-bottom:6px;
  }

  /* ── Grille des cartes horaires ── */
  /* ── Lignes horaires ─────────────────────────────────────────────── */
  .wh-rows-section {
    border-bottom:1px solid var(--border);
  }

  /* En-tête colonnes */
  .wh-rows-header {
    display:grid;
    grid-template-columns: 44px 1fr 1fr 80px;
    gap:10px;
    padding:6px 14px 5px;
    border-bottom:1px solid var(--border);
    font-family:'Share Tech Mono',monospace;
    font-size:9px;
    letter-spacing:1.5px;
    color:var(--text-muted);
    text-transform:uppercase;
  }

  /* Ligne horaire */
  .wh-row {
    display:grid;
    grid-template-columns: 44px 1fr 1fr 80px;
    gap:10px;
    align-items:center;
    padding:9px 14px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    transition:background 0.15s;
  }
  .wh-row:last-child { border-bottom:none; }
  .wh-row:hover { background:rgba(255,255,255,0.03); }

  /* Fenêtre obs 00h–05h */
  .wh-row.wh-row-obs {
    background:rgba(82,221,212,0.04);
    border-left:2px solid rgba(82,221,212,0.5);
    padding-left:12px;
  }
  .wh-row.wh-row-obs:hover { background:rgba(82,221,212,0.07); }

  /* Nuages > 20% */
  .wh-row.wh-row-bad { background:rgba(240,112,144,0.04); }
  .wh-row.wh-row-bad.wh-row-obs { background:rgba(240,112,144,0.06); border-left-color:var(--rose); }

  /* Colonne heure */
  .wh-row-time {
    font-family:'Share Tech Mono',monospace;
    font-size:15px; font-weight:bold;
    color:var(--text-dim);
    line-height:1;
  }
  .wh-row-obs .wh-row-time { color:var(--cyan); }
  .wh-row-bad .wh-row-time { color:var(--rose); }

  /* Colonne nuages : barre + % */
  .wh-row-bar-wrap {
    display:flex; align-items:center; gap:8px;
  }
  .wh-row-bar-track {
    flex:1; height:6px; border-radius:3px;
    background:rgba(255,255,255,0.07); overflow:hidden;
  }
  .wh-row-bar-fill { height:100%; border-radius:3px; transition:width 0.4s; }
  .wh-row-bar-fill.clear  { background:var(--mint); }
  .wh-row-bar-fill.partly { background:var(--gold); }
  .wh-row-bar-fill.cloudy { background:var(--rose); }
  .wh-row-cloud-val {
    font-family:'Share Tech Mono',monospace;
    font-size:13px; font-weight:bold;
    min-width:34px; text-align:right; flex-shrink:0;
  }
  .wh-row-cloud-val.clear  { color:var(--mint); }
  .wh-row-cloud-val.partly { color:var(--gold); }
  .wh-row-cloud-val.cloudy { color:var(--rose); }

  /* Colonne conditions : chips */
  .wh-row-chips {
    display:flex; flex-wrap:wrap; gap:4px; align-items:center;
  }
  .wh-chip {
    font-family:'Share Tech Mono',monospace;
    font-size:11px;
    color:var(--text-dim);
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:3px;
    padding:2px 6px;
    white-space:nowrap;
  }
  .wh-chip-warn { color:var(--gold); background:rgba(232,192,96,0.08); border-color:rgba(232,192,96,0.25); }
  .wh-chip-bad  { color:var(--rose); background:rgba(240,112,144,0.08); border-color:rgba(240,112,144,0.25); }

  /* Colonne seeing */
  .wh-row-seeing {
    font-family:'Share Tech Mono',monospace;
    font-size:11px; font-weight:bold;
    padding:3px 8px;
    border-radius:3px;
    border:1px solid;
    text-align:center;
    white-space:nowrap;
  }

  @media (max-width:500px) {
    .wh-rows-header { grid-template-columns:38px 80px 1fr 60px; gap:6px; font-size:8px; padding:5px 10px; }
    .wh-row { grid-template-columns:38px 80px 1fr 60px; gap:6px; padding:8px 10px; }
    .wh-row.wh-row-obs { padding-left:8px; }
    .wh-row-time { font-size:13px; }
    .wh-row-cloud-val { font-size:12px; min-width:28px; }
    .wh-chip { font-size:10px; padding:2px 4px; }
    .wh-row-seeing { font-size:10px; padding:2px 5px; }
  }

  /* ── Récap 4 cases ── */
  .wh-recap-section { padding:12px 14px 16px; }
  .wh-recap-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .wh-recap-cell {
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border); border-radius:6px;
    padding:12px 8px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    text-align:center;
  }
  .wh-recap-cell .wh-rc-icon { font-size:20px; line-height:1; }
  .wh-recap-cell .wh-rc-val {
    font-family:'Rajdhani',sans-serif; font-size:18px;
    font-weight:700; color:var(--text-bright); line-height:1;
  }
  .wh-recap-cell .wh-rc-lbl {
    font-family:'Share Tech Mono',monospace; font-size:8px;
    color:var(--text-muted); letter-spacing:0.5px;
  }
  .wh-recap-cell.warn { border-color:rgba(232,192,96,0.4); background:rgba(232,192,96,0.06); }
  .wh-recap-cell.warn .wh-rc-val { color:var(--gold); }
  .wh-recap-cell.bad  { border-color:rgba(240,112,144,0.4); background:rgba(240,112,144,0.06); }
  .wh-recap-cell.bad  .wh-rc-val { color:var(--rose); }
  .wh-recap-cell.good .wh-rc-val { color:var(--mint); }

  /* ===== CALCULATEUR POSE ===== */
  .exp-calc { padding:10px 14px 12px; border-top:1px solid var(--border); background:rgba(4,9,15,0.6); flex-shrink:0; }
  .exp-title { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; margin-bottom:8px; }
  .bortle-row { display:flex; gap:3px; margin-bottom:10px; }
  .bortle-btn { flex:1; padding:4px 0; font-family:'Share Tech Mono',monospace; font-size:10px; border:1px solid var(--border); background:var(--card-inner); color:var(--text-muted); cursor:pointer; transition:all 0.15s; text-align:center; }
  .bortle-btn:hover { color:var(--text); border-color:var(--border-bright); }
  .b-sel-1,.b-sel-2 { background:rgba(0,60,20,0.4)!important; border-color:#52e090!important; color:#52e090!important; }
  .b-sel-3,.b-sel-4 { background:rgba(0,80,10,0.3)!important; border-color:var(--mint)!important; color:var(--mint)!important; }
  .b-sel-5         { background:rgba(200,160,0,0.2)!important; border-color:var(--gold)!important; color:var(--gold)!important; }
  .b-sel-6,.b-sel-7 { background:rgba(200,80,0,0.2)!important; border-color:#e07030!important; color:#e07030!important; }
  .b-sel-8,.b-sel-9 { background:rgba(180,0,0,0.25)!important; border-color:var(--rose)!important; color:var(--rose)!important; }
  .exp-results { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .exp-result-item { background:var(--card-inner); border:1px solid var(--border); padding:6px 8px; text-align:center; }
  .exp-result-label { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:1px; color:var(--text-muted); text-transform:uppercase; margin-bottom:3px; }
  .exp-result-val { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; color:var(--text-bright); line-height:1; }
  .exp-result-unit { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--text-dim); }
  /* Photo plein card quand prise */
  .card-back.photo-only {
    display: flex;
    flex-direction: column;
  }
  .card-back.photo-only .card-photo-wrap {
    flex: 1;
    width: 100%;
    background: #02050d;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
  }
  .card-back.photo-only .card-photo-wrap .card-back-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1 !important;
    display: block;
  }
  .exp-nights { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
  .night-dot { width:6px; height:6px; border-radius:50%; background:var(--rose); display:inline-block; }
  .exp-mosaic { color:var(--cyan); }

  /* ===== ONGLETS ===== */
  .tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }

  .tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    margin-bottom: -1px;
    white-space: nowrap;
  }

  .tab-btn:hover { color: var(--text); }
  .tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
  .tab-btn.active-gallery { color: var(--mint); border-bottom-color: var(--mint); }

  .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mint);
    color: #03080e;
    font-size: 8px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    margin-left: 6px;
    min-width: 16px;
    vertical-align: middle;
  }

  /* ===== GALERIE ===== */
  #galleryView { display: none; }
  #plannerView { display: block; }

  .gallery-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;
  }

  .gallery-filter-row {
    display: flex;
    gap: 5px;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    touch-action: pan-x;  /* iOS : ne capture que le scroll horizontal */
  }
  .gallery-filter-row::-webkit-scrollbar { display: none; }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 40px;
    touch-action: pan-y;  /* iOS : laisse passer les taps vers les cards */
    position: relative;
    z-index: 1;
  }

  @media (max-width: 600px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  }

  .gallery-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    overflow: visible;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: fadeSlide 0.35s ease both;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
    touch-action: manipulation;
    -webkit-user-select: none;
  }
  .gallery-card img {
    border-radius: 2px 2px 0 0;
  }

  .gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    border-color: var(--mint);
  }

  .gallery-card > img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
    background: #02050d;
    display: block;
    pointer-events: none;
    border-radius: 2px 2px 0 0;
  }

  /* Pas de titre sur les cards */
  .gallery-card-info { display: none; }

  .gallery-card-pub {
    position: absolute;
    bottom: 8px; left: 8px;
    background: rgba(4,9,15,0.82);
    border: 1px solid rgba(94,255,216,0.4);
    color: rgba(94,255,216,0.8);
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s;
    z-index: 20;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: all;
  }
  .gallery-card-pub:hover { background: rgba(4,9,15,0.95); border-color: var(--mint); }
  .gallery-card-pub.published { color: var(--gold); border-color: var(--gold); }
  @media (hover: none) {
    .gallery-card-pub { opacity: 1 !important; }
    .gallery-card-del { opacity: 1 !important; }
  }

  .gallery-card-del {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(4,9,15,0.82);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 1;           /* toujours visible — pas de hover requis */
    transition: color 0.2s, background 0.2s;
    z-index: 3;
  }
  .gallery-card-del:hover,
  .gallery-card-del:active { color: var(--rose); border-color: var(--rose); background: rgba(240,112,144,0.18); }

  /* Lightbox plein écran */
  /* ─── Lightbox galerie immersive ─── */
  .glb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: hidden;
  }
  body.photo-viewer-open {
    overflow: hidden;
    touch-action: none;
  }
  /* Bandeau PWA — compense la safe-area iOS */
  @supports (padding-top: env(safe-area-inset-top)) {
    .glb-top {
      padding-top: max(env(safe-area-inset-top), 20px);
      min-height: calc(60px + env(safe-area-inset-top));
    }
  }
  .glb-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  .glb-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 64px 132px;
    z-index: 2;
  }
  .glb-image {
    position: absolute;
    max-width: calc(100% - 128px);
    max-height: calc(100% - 204px);
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.4s ease;
    will-change: opacity;
    user-select: none;
    -webkit-user-drag: none;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  }
  .glb-image:first-child {
    opacity: 1;
  }
  .glb-image:last-child {
    opacity: 0;
  }
  /* Le mode Top du mois conserve ses slots en arrière-plan. */
  .glb-img-slot {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.4s ease;
    will-change: opacity;
  }

  /* Gradient bas pour lisibilité du texte */
  .glb-gradient {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(transparent, rgba(1,3,10,0.92));
    z-index: 3;
    pointer-events: none;
  }

  /* Infos — glissent depuis le bas */
  .glb-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 4;
    padding: 24px 20px 32px;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(.22,.68,0,1.2), opacity 0.4s ease;
  }
  .glb-info.glb-info-visible {
    transform: translateY(0);
    opacity: 1;
  }

  .glb-title {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  }
  .glb-meta {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: rgba(200,216,240,0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  /* Barre supérieure */
  .glb-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Bandeau solide : couvre la safe-area iOS + 16px de marge */
    padding-top: max(env(safe-area-inset-top, 16px), 16px);
    padding-bottom: 14px;
    padding-left: 18px;
    padding-right: 18px;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    background: rgba(5, 12, 28, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .glb-counter {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    letter-spacing: 2px;
  }
  .glb-close {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .glb-close:active { background: rgba(240,112,144,0.5); border-color: var(--rose); }
  .glb-close:hover  { background: rgba(240,112,144,0.4); border-color: var(--rose); }

  .glb-nav {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 44px;
    height: 56px;
    margin-top: -28px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 22px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-tap-highlight-color: transparent;
  }
  .glb-nav:hover { background: rgba(255,255,255,0.16); }
  .glb-nav:disabled { opacity: 0.2; cursor: default; }
  .glb-nav-prev { left: 12px; }
  .glb-nav-next { right: 12px; }

  @media (max-width: 600px) {
    .glb-stage { padding: 64px 10px 150px; }
    .glb-image {
      max-width: calc(100% - 20px);
      max-height: calc(100% - 214px);
      box-shadow: none;
    }
    .glb-nav {
      top: auto;
      bottom: max(82px, calc(68px + env(safe-area-inset-bottom)));
      width: 40px;
      height: 40px;
      margin: 0;
      font-size: 28px;
    }
    .glb-nav-prev { left: 10px; }
    .glb-nav-next { right: 10px; }
  }

/* ===== GALERIE PUBLIQUE COMMUNAUTAIRE ===== */

.pg-filters {
  padding: 12px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pg-filter-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 4px;
}

.pg-filter-main {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 7px 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.pg-filter-main.active {
  background: rgba(82,221,212,0.14);
  border-color: var(--cyan);
  color: var(--cyan);
}
.pg-top-btn.active {
  background: rgba(232,192,96,0.14);
  border-color: var(--gold);
  color: var(--gold);
}

.pg-f-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 7px 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
}
.pg-f-btn.active {
  background: rgba(82,221,212,0.14);
  border-color: var(--cyan);
  color: var(--cyan);
}
.pg-f-btn:hover { color: var(--cyan); border-color: var(--cyan); background: var(--card); }

.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 12px 0;
}

.pg-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  animation: fadeUp 0.4s ease both;
  transition: border-color 0.2s;
}
.pg-card:hover { border-color: var(--cyan); }

.pg-card-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  background: #02050d;
}
.pg-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
}
.pg-card-img-wrap img.loaded { opacity: 1; }

.pg-card-overlay {
  position: absolute;
  top: 8px; left: 8px;
}

.pg-card-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pg-card-name {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pg-meta-author {
  font-size: 10px;
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.5px;
}
.pg-meta-secondary {
  font-size: 9px;
  color: var(--text-muted);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.5px;
}
.pg-meta-tel, .pg-meta-month {
  font-size: 9px;
  color: var(--text-muted);
  font-family: 'Share Tech Mono', monospace;
}
.pg-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.pg-like-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pg-like-btn:hover { border-color: var(--rose); color: var(--rose); }
.pg-like-btn.liked { border-color: var(--rose); color: var(--rose); background: rgba(255,85,119,0.08); }
.pg-like-btn:disabled { opacity: 0.5; }

.pg-unpub-btn {
  background: none;
  border: none;
  color: var(--border);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
  line-height: 1;
}
.pg-unpub-btn:hover { color: var(--rose); }

/* Skeleton */
.pg-card-skeleton { pointer-events: none; }
.pg-skeleton-img {
  aspect-ratio: 4/3;
  background: linear-gradient(90deg, var(--card-bg) 25%, rgba(255,255,255,0.04) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.pg-skeleton-line {
  height: 10px;
  border-radius: 4px;
  margin: 8px 12px 0;
  background: linear-gradient(90deg, var(--card-bg) 25%, rgba(255,255,255,0.04) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.pg-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--text-muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 40px 0;
}

.pg-load-more {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--cyan);
  padding: 10px 24px;
  border-radius: 20px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.pg-load-more:hover { background: rgba(126,207,255,0.08); border-color: var(--cyan); }


/* ===== MODE TINDER ===== */

/* ── Mode Tinder — réutilise le système lightbox ── */
.pg-tinder {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: #02050d;
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: opacity 0.25s;
}
.pg-tinder.open { display: block; opacity: 1; pointer-events: all; }

/* Barre de progression dans le glb-info */
.pg-tinder .pg-tinder-progress-wrap {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}
.pg-tinder-progress {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0%;
}

/* Bouton like dans le bandeau bas */
.pg-tinder-like {
  background: rgba(2,5,13,0.7);
  border: 2px solid var(--border);
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  margin-top: 8px;
  align-self: flex-start;
}
.pg-tinder-like span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
}
.pg-tinder-like:hover { border-color: var(--rose); color: var(--rose); }
.pg-tinder-like.liked { border-color: var(--rose); color: var(--rose); background: rgba(255,85,119,0.15); }
.pg-tinder-like.pg-tinder-like-pop { transform: scale(1.2); }
.pg-tinder-like:disabled { opacity: 0.5; }

/* Flèches lightbox communauté */


.pg-lb-counter {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== TAB-BAR MOBILE REDESIGN ===== */

.tab-bar {
  display: flex !important;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  gap: 0;
}

.tab-bar-scroll {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}
.tab-bar-scroll::-webkit-scrollbar { display: none; }

.tab-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px !important;
  white-space: nowrap;
}

.tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tab-btn span {
  font-size: 9px !important;
  letter-spacing: 1px !important;
}

.tab-user-bar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding-right: 4px;
  flex-shrink: 0;
}

@media (max-width: 380px) {
  .tab-btn { padding: 8px 10px !important; }
  .tab-btn span { font-size: 8px !important; }
}

/* Tab boutons icône seule */
.tab-btn-icon {
  flex-direction: row !important;
  padding: 10px 14px !important;
  gap: 4px;
  position: relative;
}
.tab-btn-icon .tab-badge {
  margin-left: 0;
}

/* ===== TÉLESCOPE PERSONNALISÉ ===== */

.custom-tel-form {
  flex-direction: column;
  gap: 10px;
  background: rgba(126,207,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-top: 4px;
}

.custom-tel-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
}

.custom-tel-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custom-tel-row label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.custom-tel-row .profile-city-input {
  padding: 8px 10px;
  font-size: 13px;
}

.custom-tel-computed {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  min-height: 16px;
  margin-top: 4px;
}

/* ===== FILTRES COLLAPSIBLES ===== */

.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-toggle-btn:hover,
.filter-toggle-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(126,207,255,0.06);
}
.filter-toggle-btn svg {
  flex-shrink: 0;
  transition: transform 0.25s;
}
.filter-toggle-btn.active svg {
  transform: rotate(180deg);
}

.filter-toggle-row {
  display: flex;
  align-items: center;
  padding: 4px 0 8px;
}

.filter-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 0;
}
.filter-panel.filter-panel-open {
  max-height: 600px;
  opacity: 1;
}

/* Filtres collapsibles sur tous les écrans */

/* Bouton "Tous les mois" */
.month-btn-all {
  color: var(--text-muted);
  border-color: var(--border);
  font-style: normal;
}
.month-btn-all.active {
  background: rgba(200,216,240,0.12) !important;
  border-color: var(--text) !important;
  border-width: 2px !important;
  color: var(--text) !important;
}
/* S'assurer que les autres boutons ne restent pas actifs */
.month-btn.active:not(.month-btn-all) {
  background: rgba(232,192,96,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

/* ===== BARRE RECHERCHE ===== */

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 220px;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 7px 10px 7px 30px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--cyan); }

/* Masquer le bouton natif clear sur Safari */
.search-input::-webkit-search-cancel-button { display: none; }

@media (max-width: 480px) {
  .search-wrap { max-width: 160px; }
}

/* Barre filtres + recherche sur une ligne */
.controls-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.controls-topbar .search-wrap {
  flex: 1;
  max-width: none;
}

/* Harmoniser l'intensité des bordures actives sur categ-btn */
.categ-btn.active-incontournables,
.categ-btn.active-messier,
.categ-btn.active-ngc,
.categ-btn.active-ic,
.categ-btn.active-planetes,
.categ-btn.active-all {
  border-width: 2px;
}

/* City-bar repositionnée */
.city-profile-hint {
  width: 100%;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
  padding-top: 4px;
  text-align: right;
}
.city-profile-hint::before {
  content: '→ ';
}

/* ===== LIKES — sans bordure, glow + transition ===== */
.pg-like-btn {
  background: none !important;
  border: none !important;
  color: var(--text-muted);
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  font-family: 'Share Tech Mono', monospace;
}
.pg-like-btn:hover {
  color: var(--rose);
  text-shadow: 0 0 10px rgba(255,85,119,0.5);
}
.pg-like-btn.liked {
  color: var(--rose);
  text-shadow: 0 0 14px rgba(255,85,119,0.7), 0 0 28px rgba(255,85,119,0.3);
}
.pg-like-btn:disabled { opacity: 0.5; }

/* Bouton like dans la lightbox communauté */
.pg-tinder-like {
  background: none !important;
  border: none !important;
  color: rgba(200,216,240,0.6);
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 8px;
}
.pg-tinder-like span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 1px;
}
.pg-tinder-like:hover, .pg-tinder-like.liked {
  color: var(--rose);
  text-shadow: 0 0 16px rgba(255,85,119,0.8), 0 0 32px rgba(255,85,119,0.3);
}
.pg-tinder-like.pg-tinder-like-pop { transform: scale(1.3); }
.pg-tinder-like:disabled { opacity: 0.5; }

/* ===== CROIX EFFACER RECHERCHE ===== */
.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  z-index: 2;
}
.search-clear:hover { color: var(--rose); }
.search-wrap { position: relative; }

/* ===== COMPTE PHOTOS GALERIE ===== */
.gallery-photo-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
  padding: 6px 0 12px;
}

/* ===== INSCRIPTION DATE ===== */
/* Stocker la date d'inscription au premier login */

/* ===== LUNE DANS MODAL MÉTÉO ===== */
.wh-moon-section {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.wh-moon-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wh-moon-arc-wrap {
  flex: 1;
  overflow: hidden;
}
.wh-moon-arc-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== LIEN MÉTÉO EXTERNE ===== */
.weather-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.weather-ext-link {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--cyan);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.weather-ext-link:hover { opacity: 1; text-decoration: underline; }

/* ===== BOUTONS GALERIE PERSO — redesign discret ===== */
.gallery-card-actions {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.gallery-card-wrap:hover .gallery-card-actions,
.gallery-card-wrap.actions-visible .gallery-card-actions {
  opacity: 1;
  pointer-events: all;
}
@media (hover: none) {
  /* Mobile : toujours visible */
  .gallery-card-actions { opacity: 1; pointer-events: all; }
}

.gca-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(4,9,15,0.75);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: rgba(200,216,240,0.6);
  transition: all 0.2s;
  backdrop-filter: blur(4px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.gca-del:hover, .gca-del:active {
  color: var(--rose);
  border-color: rgba(240,112,144,0.5);
  background: rgba(240,112,144,0.15);
}
.gca-pub {
  color: rgba(200,216,240,0.5);
}
.gca-pub:hover, .gca-pub:active {
  color: var(--cyan);
  border-color: rgba(94,255,216,0.4);
  background: rgba(94,255,216,0.1);
}
.gca-pub.published {
  color: var(--gold);
  border-color: rgba(232,192,96,0.4);
  background: rgba(232,192,96,0.08);
}

/* ===== ONGLET VIDÉOS ===== */
.videos-header {
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.videos-section-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  color: var(--text-bright);
}
.videos-subtitle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 4px;
}
.videos-section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.video-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #0d1828);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.15s;
}
.video-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #050d18;
  overflow: hidden;
}
.video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.video-card:hover .video-thumb img { opacity: 1; }
.video-duration {
  position: absolute;
  bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}
.video-play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  color: rgba(255,255,255,0.8);
  opacity: 0;
  transition: opacity 0.2s;
}
.video-card:hover .video-play { opacity: 1; }
.video-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.video-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.3;
}
.video-channel {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--cyan);
  text-transform: uppercase;
}
.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.video-tag {
  background: rgba(126,207,255,0.08);
  border: 1px solid rgba(126,207,255,0.2);
  color: var(--text-dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
}
.video-desc {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.5;
}
.videos-add-hint {
  margin-top: 24px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 1px;
}
.videos-add-hint code {
  color: var(--cyan);
  background: rgba(126,207,255,0.08);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Carte télescope "Je ne sais pas encore" */
.telescope-card-unknown {
  border-style: dashed;
  opacity: 0.75;
}
.telescope-card-unknown.selected {
  opacity: 1;
  border-style: solid;
}

/* ══════════════════════════════════════════════════════════════════
   MODAL LUNE — iOS-like
   ══════════════════════════════════════════════════════════════════ */

.moon-modal-overlay {
  position: fixed; inset: 0;
  z-index: 3000;
  background: rgba(1,3,10,0.92);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(8px);
}
.moon-modal-overlay.open {
  opacity: 1; pointer-events: all;
}
.moon-modal-panel {
  width: min(460px, 100vw);
  max-height: 96vh;
  background: #080f1c;
  border-radius: 20px 20px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  overflow-y: auto;
  transform: translateY(30px);
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.1);
  position: relative;
}
.moon-modal-overlay.open .moon-modal-panel {
  transform: translateY(0);
}

/* Poignée */
.moon-modal-panel::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 12px auto 0;
}

.moon-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.1);
  border: none; color: rgba(255,255,255,0.7);
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

.moon-modal-disc-wrap {
  display: flex; justify-content: center;
  padding: 20px 0 8px;
}
.moon-modal-disc-wrap canvas {
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(240,220,140,0.15), 0 0 120px rgba(240,220,140,0.06);
}

.moon-modal-phase-name {
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px; font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.moon-modal-phase-date {
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 1px;
  color: rgba(200,216,240,0.5);
  margin-bottom: 20px;
}

/* Stats */
.moon-modal-stats {
  margin: 0 16px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  overflow: hidden;
}
.moon-stat-row {
  display: flex; justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: 'Share Tech Mono', monospace;
}
.moon-stat-row:last-child { border-bottom: none; }
.moon-stat-lbl { font-size: 13px; color: rgba(200,216,240,0.7); }
.moon-stat-val { font-size: 13px; color: #fff; }

/* Calendrier */
.moon-modal-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 16px 12px;
}
.moon-cal-month {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px; font-weight: 600;
  color: rgba(200,216,240,0.9);
  letter-spacing: 1px;
}
.moon-cal-nav {
  background: rgba(255,255,255,0.08);
  border: none; color: rgba(200,216,240,0.7);
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.moon-cal-nav:hover { background: rgba(255,255,255,0.15); color: #fff; }

.moon-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 10px;
}
.moon-cal-dow {
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 1px;
  color: rgba(200,216,240,0.35);
  padding: 4px 0 8px;
}
.moon-cal-cell {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 4px 2px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.moon-cal-cell:hover { background: rgba(255,255,255,0.06); }
.moon-cal-cell.today .moon-cal-day {
  color: var(--cyan);
  font-weight: bold;
}
.moon-cal-cell.current {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
}
.moon-cal-mini { display: block; }
.moon-cal-day {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; color: rgba(200,216,240,0.6);
  line-height: 1;
}

/* Événements */
.moon-modal-events {
  margin: 8px 16px 20px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  overflow: hidden;
}
.moon-event-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: 'Share Tech Mono', monospace;
}
.moon-event-row:last-child { border-bottom: none; }
.moon-event-type { font-size: 12px; color: rgba(200,216,240,0.8); letter-spacing: 1px; }
.moon-event-date { font-size: 11px; color: rgba(200,216,240,0.45); }

/* ===== ICÔNES LUNE weather-icons ===== */
.moon-disc-wrap .wi {
  display: block;
  filter: drop-shadow(0 0 6px rgba(240,220,130,0.4));
}
.moon-cal-cell .wi {
  display: block;
  margin: 0 auto;
}
.wh-moon-wrap .wi {
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(240,220,130,0.35));
}
#moonModal .moon-modal-disc-wrap .wi {
  filter: drop-shadow(0 0 30px rgba(240,220,130,0.3))
          drop-shadow(0 0 60px rgba(240,220,130,0.12));
}

/* ===== ANIMATION LUNE ===== */

/* Pulsation halo dans le SVG trajectoire */
.moon-halo-pulse {
  animation: moonPulse 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes moonPulse {
  0%, 100% { r: 20; opacity: 0.06; }
  50%       { r: 28; opacity: 0.02; }
}

/* Glow sur l'icône dans les cards météo */
.moon-icon-glow .wi {
  animation: moonIconGlow 4s ease-in-out infinite;
}
@keyframes moonIconGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(240,220,130,0.3)); }
  50%       { filter: drop-shadow(0 0 12px rgba(240,220,130,0.7)) drop-shadow(0 0 24px rgba(240,220,130,0.2)); }
}

/* ===== BOUTONS LIGHTBOX GALERIE ===== */
.glb-action-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.glb-action-btn {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(200,216,240,0.8);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.glb-action-pub:hover, .glb-action-pub:active {
  background: rgba(94,255,216,0.12);
  border-color: var(--cyan);
  color: var(--cyan);
}
.glb-action-pub.published {
  color: var(--gold);
  border-color: rgba(232,192,96,0.4);
  background: rgba(232,192,96,0.08);
}
.glb-action-del:hover, .glb-action-del:active {
  background: rgba(240,112,144,0.12);
  border-color: var(--rose);
  color: var(--rose);
}

/* Indicateur publié sur thumbnail */
.gallery-card-pub-dot {
  position: absolute;
  bottom: 6px; left: 6px;
  color: var(--gold);
  font-size: 12px;
  z-index: 3;
  text-shadow: 0 0 6px rgba(232,192,96,0.6);
  pointer-events: none;
}

/* Bouton enregistrer rapide sous fenêtre d'observation */
.profile-save-quick {
  width: 100%;
  background: rgba(126,207,255,0.08);
  border: 1px solid rgba(126,207,255,0.3);
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 20px;
  transition: background 0.2s, border-color 0.2s;
}
.profile-save-quick:hover {
  background: rgba(126,207,255,0.15);
  border-color: var(--cyan);
}

/* Actions lightbox galerie perso — bas droite */
.glb-actions-fixed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.glb-actions-fixed .glb-action-btn {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
}

/* Filtre Lune/Soleil */
.categ-btn.active-planetes,
.categ-btn.active-lunesoleil {
  background: rgba(240,220,130,0.12);
  border-color: var(--gold);
  color: var(--gold);
  border-width: 2px;
}

/* City bar simplifiée */
.city-bar-simple {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.city-bar-simple .city-name-display {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--text-bright);
}
.city-bar-simple .city-profile-hint {
  margin-left: auto;
  display: block !important;
}

/* ===== VIDÉOS EMBED ===== */
.videos-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0 0 8px;
}

.video-embed-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.video-embed-card:hover {
  border-color: var(--border-bright);
}

/* Ratio 16:9 responsive */
.video-embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}
.video-embed-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.video-embed-meta {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.video-embed-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  color: var(--text-bright);
  line-height: 1.4;
}

.video-embed-channel {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--cyan);
  text-transform: uppercase;
}

.video-embed-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.video-embed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* ===== BOUTON SIGNALER ===== */
.pg-report-btn {
  position: absolute;
  bottom: 90px;
  right: 16px;
  z-index: 6;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,100,100,0.3);
  background: rgba(0,0,0,0.5);
  color: rgba(255,100,100,0.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}
.pg-report-btn:hover {
  border-color: rgba(255,80,80,0.8);
  color: rgba(255,80,80,1);
  background: rgba(255,50,50,0.15);
}
.pg-report-btn.reported {
  border-color: rgba(255,80,80,0.8);
  color: rgba(255,80,80,1);
  background: rgba(255,50,50,0.2);
}

/* ── Titre centré dans le bandeau lightbox ── */
.glb-top-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px;
}

/* ===== SÉLECTEUR DE LANGUE ===== */
.lang-switcher {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.lang-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.lang-btn.active {
  background: var(--cyan);
  color: #02050d;
}
.lang-btn:hover:not(.active) { color: var(--text); }

/* ===== TOGGLE NOTIFICATIONS PROFIL ===== */
.profile-notif-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-notif-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.profile-notif-toggle input { display: none; }
.profile-notif-slider {
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.profile-notif-slider::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s, background 0.2s;
}
.profile-notif-toggle input:checked + .profile-notif-slider {
  background: rgba(94,255,216,0.3);
  border: 1px solid var(--mint);
}
.profile-notif-toggle input:checked + .profile-notif-slider::after {
  transform: translateX(18px);
  background: var(--mint);
}
.profile-notif-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: var(--text);
  letter-spacing: 1px;
}
.profile-notif-sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 50px;
}

/* ===== LANGUE DANS LE PROFIL ===== */
.profile-lang-wrap {
  display: flex;
  gap: 8px;
}
.profile-lang-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px;
  border-radius: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.profile-lang-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(126,207,255,0.08);
}
.profile-lang-btn:hover:not(.active) {
  border-color: var(--text-muted);
  color: var(--text);
}

/* ===== TEXTE EXPLICATIF SCORE MÉTÉO ===== */
.wday-explain {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-align: center;
  padding: 2px 4px;
  min-height: 12px;
  line-height: 1.4;
  opacity: 0.85;
}
.good-night  .wday-explain { color: var(--mint); }
.ok-night    .wday-explain { color: var(--gold); }
.bad-night   .wday-explain { color: var(--rose); opacity: 0.7; }

/* ===== SLIDER NAV MOIS ===== */
.month-nav-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.month-nav {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.month-nav::-webkit-scrollbar { display: none; }

.month-btn {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.month-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
}

.month-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-bright, #2a4060);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.month-dot.active {
  background: var(--gold);
  transform: scale(1.4);
}

.weather-updated-inline {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted);
  opacity: 0.6;
}