/* ============================================================================
   ASTRO GÉNÈSE - CARTE DU CIEL - style.css v32
   Palette typographique :
     • Orbitron           → planètes, satellites ET signes zodiacaux (roue)
     • IBM Plex Serif     → constellations profondes (ciel) + titres UI
     • Proza Libre        → contenu des panneaux, boutons, chiffres
   v32 (2026-07-26) :
     • Fix chevauchement bandeau datetime × FAB en mobile portrait
       → datetime seul en haut à droite, FAB descendu en dessous
     • Fix chevauchement info-panel × astro-controls en mobile portrait
       → info-panel remonté à bottom:100px pour laisser place à 2 lignes de boutons
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
    width: 100%; height: 100%; overflow: hidden; background: #000; 
    font-family: 'Proza Libre', 'Segoe UI', 'Helvetica Neue', sans-serif;
    -webkit-tap-highlight-color: transparent; 
}

#app-container { 
    position: relative; width: 100vw; height: 100vh; 
    background: radial-gradient(circle at center, #050a14 0%, #000000 100%); 
    color: #dce4f0; overflow: hidden; touch-action: none; 
}

/* --- LOADING --- */
#loading-overlay { position: absolute; inset: 0; background: #000; z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s; padding: 20px; text-align: center; }
#loading-overlay.hidden { opacity: 0; pointer-events: none; }
#loading-text { color: #fbc275; font-size: 24px; margin-bottom: 20px; font-family: 'IBM Plex Serif', serif; letter-spacing: 1px; }
#progress-container { width: 80%; max-width: 300px; height: 6px; background: #1a1a2e; border-radius: 3px; overflow: hidden; border: 1px solid #333; }
#progress-bar { width: 0%; height: 100%; background: #fbc275; transition: width 0.3s; }
#progress-text { color: #aabfff; font-size: 12px; margin-top: 10px; max-width: 90%; word-break: break-word; }

/* --- UI PANELS --- */
.ui-panel { position: absolute; background: rgba(10, 15, 30, 0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; z-index: 10; backdrop-filter: blur(5px); }

/* Time-travel panel : caché par défaut, affiché via bouton FAB ⏱ */
#time-travel-panel { 
    top: 74px; right: 20px; width: 240px; padding: 18px; 
    display: none; flex-direction: column; gap: 10px;
}
#time-travel-panel.visible { display: flex; }
#time-travel-panel h3 { color: #fbc275; font-size: 13px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1.5px; font-family: 'IBM Plex Serif', serif; font-weight: 600; }
#time-travel-panel label { font-size: 10px; color: #8fa1bd; text-transform: uppercase; letter-spacing: 0.5px; }
#time-travel-panel input { width: 100%; background: #1a1a2e; border: 1px solid #444; color: #fff; padding: 7px 8px; border-radius: 4px; font-size: 12px; margin-top: 3px; font-family: 'Proza Libre', sans-serif; }
#time-travel-panel button { background: #fbc275; color: #000; border: none; padding: 9px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 8px; font-family: 'Proza Libre', sans-serif; letter-spacing: 0.5px; }
#time-travel-panel button:hover { background: #ffd68a; }

/* Info panel — desktop / paysage : à gauche, 25% largeur max */
#info-panel { 
    top: 20px; left: 20px; width: 340px; max-width: 25vw;
    padding: 22px; border-radius: 12px; display: none; flex-direction: column; 
    max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; 
}
#info-panel.visible { display: flex; }
#info-panel h2 { color: #fbc275; font-size: 28px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; font-family: 'IBM Plex Serif', serif; font-weight: 600; letter-spacing: 0.5px; }
#info-panel h2 span { font-size: 30px; }
.info-section { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.info-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #8fa1bd; margin-bottom: 10px; font-family: 'Proza Libre', sans-serif; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.info-section h3 .zod-glyph { font-size: 14px; }
.info-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; gap: 10px; font-family: 'Proza Libre', sans-serif; }
.info-label { opacity: 0.7; text-align: left; }
.info-value { font-weight: 600; text-align: right; }
.status-highlight { color: #4ade80; }
.retro-grade { color: #ff5555; }

.deg-value { cursor: help; border-bottom: 1px dotted rgba(251, 194, 117, 0.4); }
.aspect-orbe { cursor: help; }

/* --- CONTRÔLES INFÉRIEURS --- */
#astro-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 15; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 20px); }
#datetime-display { position: absolute; bottom: 20px; right: 20px; background: rgba(10, 15, 30, 0.85); padding: 8px 12px; border-radius: 8px; font-size: 12px; text-align: right; border: 1px solid rgba(255,255,255,0.1); z-index: 10; line-height: 1.4; font-family: 'Proza Libre', sans-serif; }

.astro-btn { 
    background: rgba(10, 15, 30, 0.9); border: 1px solid rgba(255,255,255,0.2); color: #fff; 
    padding: 8px 16px; border-radius: 20px; cursor: pointer; 
    font-family: 'Proza Libre', sans-serif; font-size: 12px; font-weight: 500;
    letter-spacing: 0.3px; transition: all 0.2s; 
}
.astro-btn:hover, .astro-btn:active { background: rgba(30, 40, 60, 0.95); border-color: #fbc275; }
.astro-btn.active { background: #fbc275; color: #000; }

/* --- BOUTONS FLOTTANTS EN HAUT À DROITE --- */
#top-right-controls { position: absolute; top: 20px; right: 20px; z-index: 25; display: flex; gap: 8px; }
.fab-btn { 
    width: 42px; height: 42px; background: rgba(10, 15, 30, 0.95); border: 1px solid #fbc275; 
    color: #fbc275; border-radius: 50%; font-size: 18px; display: flex; 
    align-items: center; justify-content: center; cursor: pointer; padding: 0; 
    font-family: 'Proza Libre', sans-serif; transition: all 0.2s;
}
.fab-btn:hover { background: rgba(30, 40, 60, 0.95); transform: scale(1.05); }

/* --- LABELS DANS LE CIEL --- */
/* Labels des planètes/satellites : Orbitron (technologique) */
.astro-label { 
    color: rgba(255,255,255,0.9); font-size: 11px; text-transform: uppercase; 
    letter-spacing: 1.5px; text-shadow: 0 0 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.8); 
    position: absolute; pointer-events: auto; cursor: pointer; padding: 4px; user-select: none; 
    font-family: 'Orbitron', 'Courier New', monospace; font-weight: 500;
    opacity: 0; transition: opacity 0.6s ease-out, color 0.2s; 
}
body.labels-ready .astro-label { opacity: 1; }
.astro-label:hover { color: #fbc275; }

/* v28 : les 12 signes du zodiaque sur la roue → Orbitron (comme les planètes) */
.astro-label.constellation { 
    font-family: 'Orbitron', 'Courier New', monospace; font-weight: 500;
    color: rgba(190, 200, 230, 0.75); font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; font-style: normal;
}
.astro-label.constellation:hover { color: #fbc275; }

/* v28 : les 88 constellations du ciel profond → IBM Plex Serif italique */
.sky-label {
    color: rgba(170, 191, 255, 0.55); font-size: 11px; letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(0,0,0,1);
    position: absolute; pointer-events: auto; cursor: pointer; padding: 4px; user-select: none;
    font-family: 'IBM Plex Serif', serif; font-style: italic; font-weight: 400;
    text-transform: none;
    opacity: 0; transition: opacity 0.6s ease-out, color 0.2s;
}
body.labels-ready .sky-label { opacity: 1; }
.sky-label:hover, .sky-label.sky-label-active { color: #fbc275; }

body.hide-const-names .sky-label { display: none !important; }
/* v28 corrigé : les 12 signes zodiacaux de la roue restent TOUJOURS visibles.
   Seules les 88 constellations du ciel profond sont togglables via le bouton "Constellations". */

/* v30.2 : LABELS DES ÉTOILES NOMMÉES (dominante + secondaires au zoom).
   Ces styles manquaient → les noms d'étoiles étaient créés mais invisibles.
   L'affichage (display:block/none) est piloté par le JS dans updateDOMLabels. */
.star-label {
    position: absolute;
    color: rgba(210, 222, 255, 0.75);
    font-family: 'IBM Plex Serif', serif;
    font-style: italic;
    font-size: 10px;
    letter-spacing: 0.3px;
    text-shadow: 0 0 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.9);
    pointer-events: none;
    user-select: none;
    padding: 2px 4px;
    white-space: nowrap;
    transform: translate(-50%, -140%); /* place le nom au-dessus du point stellaire */
    transition: color 0.2s, font-size 0.2s;
}
/* L'étoile dominante est un peu plus lumineuse et légèrement plus grande */
.star-label-primary {
    color: rgba(251, 224, 168, 0.92);
    font-size: 11px;
    font-weight: 600;
}
/* Au zoom (double-clic), toutes les étoiles nommées sont mises en avant */
.star-label-zoom {
    color: rgba(255, 240, 210, 0.95);
    font-size: 11px;
}

/* Glyphes zodiacaux Unicode : rendu texte, jamais emoji */
.zod-glyph {
    font-variant-emoji: text;
    font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', 'Apple Symbols', serif;
    display: inline-block;
}

/* v29b : GRAND GLYPHE ZODIACAL affiché en overlay HTML (au survol d'un signe de la roue).
   Utilise la MÊME police et le MÊME rendu que les petits glyphes des labels — juste en grand.
   Pas de canvas, pas de fond parasite, aucun risque de rendu emoji couleur. */
.zodiac-glyph-big {
    position: absolute;
    font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', 'Apple Symbols', serif;
    font-variant-emoji: text;
    font-size: 90px;
    line-height: 1;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
    transition: opacity 0.4s ease-out;
    z-index: 3;
    white-space: nowrap;
}
body.labels-ready .zodiac-glyph-big.visible {
    opacity: 0.9;
}

/* --- BADGES ET LIGNES DU PANNEAU INFO --- */
.transit-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.transit-badge { 
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; 
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); 
    border-radius: 14px; font-size: 11px; cursor: pointer; 
    font-family: 'Proza Libre', sans-serif; 
}
.transit-badge:hover { background: rgba(251, 194, 117, 0.12); }
.transit-deg { opacity: 0.7; font-size: 10px; }

.aspect-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 12px; }
.aspect-name { font-weight: 600; }
.aspect-orbe { opacity: 0.65; font-size: 11px; }
.aspect-sign { font-weight: 500; }

.i-clickable { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.15); text-underline-offset: 2px; }
.i-clickable:hover { text-decoration-color: #fbc275; }

.info-empty { opacity: 0.6; font-style: italic; font-size: 12px; padding: 4px 0; }
.info-dates { font-size: 11px; opacity: 0.7; margin-bottom: 10px; font-family: 'IBM Plex Serif', serif; font-style: italic; }
.info-body { font-size: 13px; line-height: 1.5; margin-bottom: 8px; font-family: 'Proza Libre', sans-serif; }

/* --- v28 : PREVIEW GLYPHE ZODIACAL AU SURVOL --- */
#sign-preview {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    text-align: center;
    filter: drop-shadow(0 0 40px currentColor);
}
#sign-preview.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.sign-preview-glyph {
    font-family: 'Noto Sans Symbols', 'Segoe UI Symbol', 'Apple Symbols', serif;
    font-size: 220px;
    line-height: 1;
    font-variant-emoji: text;
    text-shadow: 0 0 30px currentColor;
}
.sign-preview-name {
    font-family: 'Orbitron', monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 10px;
    text-shadow: 0 0 20px currentColor;
}

/* --- v28 : OVERLAY DE FONDU AU TOGGLE VUE GÉO/HÉLIO --- */
#view-fade-overlay {
    position: absolute; inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 22;
    transition: opacity 0.2s ease-in-out;
}
#view-fade-overlay.active { opacity: 0.75; }

/* ============================================================================
   RESPONSIVE — v29
   PC / TABLETTE PAYSAGE :          info-panel à gauche
   MOBILE PAYSAGE (< 900px large) : identique au PC (info-panel droite étroit)
   MOBILE PORTRAIT :                info-panel = 25% inférieur (au-dessus des boutons)
   ============================================================================ */

/* --- MOBILE PORTRAIT (téléphone tenu à la verticale) --- v31 */
@media (max-width: 768px) and (orientation: portrait) {
    /* v29 : bandeau datetime SEUL en haut à droite, aucun voisin */
    #datetime-display {
        top: 80px !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        font-size: 9px !important;
        padding: 5px 8px !important;
        border-radius: 6px !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 15 !important;
    }
    /* v31 : FAB descendus SOUS le bandeau datetime avec un peu plus de respiration (top: 145px au lieu de 130px) */
    #top-right-controls {
        top: 145px !important;
        right: 12px !important;
    }
    .fab-btn { width: 40px; height: 40px; font-size: 16px; }

    /* v31 : panel voyager descendu à 205px (top FAB 145 + hauteur 42 + gap 18) */
    #time-travel-panel.visible {
        top: 205px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
    }

    /* v32 : info-panel remonté à bottom:80px pour laisser passer 2 lignes de boutons compacts */
    #info-panel {
        top: auto !important;
        bottom: 80px !important;
        left: 8px !important; right: 8px !important;
        width: auto !important; max-width: none !important;
        height: 28vh !important;
        max-height: 28vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px !important; border-radius: 10px !important;
    }
    #info-panel h2 { font-size: 20px; margin-bottom: 8px; }
    .info-section { margin-bottom: 10px; padding-bottom: 10px; }
    .info-section h3 { font-size: 10px; margin-bottom: 6px; }
    .info-row { font-size: 12px; margin-bottom: 4px; }

    /* v32 : boutons du bas plus compacts pour tenir sur 1 seule ligne si possible */
    #astro-controls {
        bottom: 8px !important;
        width: calc(100% - 12px) !important;
        left: 6px !important;
        transform: none !important;
        justify-content: center !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }
    .astro-btn {
        padding: 5px 8px !important;
        font-size: 10px !important;
        letter-spacing: 0 !important;
    }

    /* Preview picto plus petit sur mobile */
    .sign-preview-glyph { font-size: 140px; }
    .sign-preview-name { font-size: 16px; }
}

/* --- MOBILE PAYSAGE (téléphone tenu horizontal) : layout PC light --- */
@media (max-width: 900px) and (orientation: landscape) {
    #top-right-controls { top: 12px; right: 12px; }
    .fab-btn { width: 36px; height: 36px; font-size: 14px; }

    #time-travel-panel.visible { top: 56px; right: 10px; width: 210px; }

    /* v28 : panneau info à droite, ~25% de largeur, hauteur pleine */
    #info-panel {
        top: 12px; bottom: 60px;
        left: auto; right: 12px;
        width: 25vw; min-width: 220px; max-width: 320px;
        max-height: none; height: auto;
        padding: 14px; border-radius: 10px;
    }
    #info-panel h2 { font-size: 20px; }
    
    #astro-controls { bottom: 10px; gap: 5px; }
    .astro-btn { padding: 5px 10px; font-size: 10px; }
    #datetime-display { font-size: 9px; padding: 4px 8px; }
    
    .sign-preview-glyph { font-size: 130px; }
    .sign-preview-name { font-size: 14px; }
}

/* --- TABLETTE (portrait entre 769 et 1024) --- */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    #info-panel { width: 300px; max-width: 30vw; }
    #time-travel-panel { width: 220px; }
    /* Aussi décaler les FAB en cas de header WordPress important */
    #top-right-controls { top: 80px; }
    #time-travel-panel { top: 130px; }
}