/* ═══════════════════════════════════════════════════════════════════════
   base.css — Variables CSS, palette éphéméride, cards horoscope 7 domaines, portrait synthéti
   ─────────────────────────────────────────────────────────
   Extrait de astro_app_V3.8.9.html lignes 158-441 (Phase 2 du refactoring).
   Cascade : ce fichier doit être chargé dans l'ordre indiqué dans index.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   VARIABLES CSS — Palette « éphéméride »
══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ═══════════════════════════════════════════════════════════════════
     V3.8.5 — REFONTE PALETTE selon la charte graphique :
     blanc froid + bleu nuit + cyan + footer sombre.
     Les anciens noms de variables sont conservés mais leurs valeurs sont
     remappées sur la nouvelle palette pour propager partout sans
     réécrire les ~5000 lignes de CSS aval.
  ═══════════════════════════════════════════════════════════════════ */

  /* ─── Nouvelle palette charte (canonique) ─── */
  --astro-bg:         #FDFDFD;      /* fond principal très clair (blanc froid) */
  --astro-bg-soft:    #D2D7DD;      /* gris bleuté pâle */
  --astro-bg-muted:   #C3C8CC;      /* gris bleu clair (texture) */
  --astro-card:       #FFFFFF;      /* blanc pur cartes */
  --astro-card-blue:  #EEF3F7;      /* bleu très pâle cartes secondaires */
  --astro-border:     #BBC2C9;      /* bleu brume bordures */
  --astro-text:       #192E5D;      /* bleu nuit titres et texte */
  --astro-text-soft:  #5E7190;      /* bleu ardoise texte secondaire */
  --astro-text-muted: #A1ABB6;      /* bleu gris labels muets */
  --astro-sidebar:    #0D214D;      /* bleu encre sidebar */
  --astro-footer:     #01123E;      /* bleu profond footer */
  --astro-panel-dark: #324875;      /* bleu royal cartes premium sombres */
  --astro-accent:        #539EDA;   /* cyan boutons/CTA */
  --astro-accent-hover:  #3D93D4;   /* hover cyan */
  --astro-accent-soft:   #6D8DA3;   /* bleu céleste micro-accent */
  --astro-free:       #6D8DA3;      /* badge gratuit */
  --astro-premium:    #539EDA;      /* badge premium */
  --astro-locked:     #A1ABB6;      /* verrouillé */
  --radius-card:      6px;
  --radius-button:    3px;
  --shadow-soft:      0 12px 35px rgba(1, 18, 62, 0.08);
  --shadow-panel:     0 18px 50px rgba(1, 18, 62, 0.16);

  /* ─── Anciens noms remappés (compat. CSS legacy) ─── */
  --ivoire:        #FDFDFD;       /* ex-fond papier vergé → blanc froid */
  --ivoire-clair:  #FFFFFF;       /* surfaces hautes cartes → blanc pur */
  --ivoire-fonce:  #BBC2C9;       /* bordures discrètes → bleu brume */
  --encre:         #192E5D;       /* texte principal → bleu nuit */
  --encre-clair:   #5E7190;       /* texte secondaire → bleu ardoise */
  --terracotta:    #539EDA;       /* accent actions → cyan principal */
  --terracotta-fonce: #3D93D4;    /* hover accent → cyan vif */
  --or-mat:        #324875;       /* accent secondaire (parts) → bleu royal assourdi */
  --vert-sauge:    #6D8DA3;       /* aspects positifs → bleu céleste */
  --rouge-brique:  #8B3A3A;       /* aspects tendus → conservé (sémantique alerte) */

  /* ─── Sémantique unifiée v3.0 (revisée pour palette charte) ─── */
  --semantic-favorable:           var(--vert-sauge);
  --semantic-favorable-bg:        rgba(109, 141, 163, 0.12);
  --semantic-favorable-bg-strong: rgba(109, 141, 163, 0.22);
  --semantic-vigilance:           var(--or-mat);
  --semantic-vigilance-bg:        rgba(50, 72, 117, 0.10);
  --semantic-vigilance-bg-strong: rgba(50, 72, 117, 0.20);
  --semantic-tension:             var(--terracotta);
  --semantic-tension-bg:          rgba(83, 158, 218, 0.10);
  --semantic-tension-bg-strong:   rgba(83, 158, 218, 0.20);
  --semantic-neutre:              var(--encre-clair);
  --semantic-neutre-bg:           rgba(94, 113, 144, 0.08);

  --shadow-strong: 0 4px 20px rgba(1, 18, 62, 0.18);

  --serif:        'Cormorant Garamond', Georgia, serif;
  --sans:         'Manrope', 'DejaVu Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --sans-reading: 'Manrope', 'DejaVu Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --mono:         'JetBrains Mono', 'Courier New', monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   HOROSCOPE 7 DOMAINES (v3.0) — Cartes étoilées
══════════════════════════════════════════════════════════════════════════ */
.horoscope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.horoscope-card {
  background: var(--ivoire-clair);
  border: 1px solid var(--ivoire-fonce);
  border-left: 4px solid var(--terracotta);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.horoscope-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.horoscope-card-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.horoscope-icone {
  font-size: 1.4rem;
  line-height: 1;
}

.horoscope-label {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--encre);
}

.horoscope-stars {
  font-size: 1rem;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.horoscope-stars-empty {
  opacity: 0.2;
}

.horoscope-lecture {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--encre);
  margin: 0;
}

.horoscope-lecture strong {
  color: var(--terracotta);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTRAIT SYNTHÉTIQUE EN INTRO (v3.0) — Lecture multi-écoles
══════════════════════════════════════════════════════════════════════════ */
.portrait-synthetique {
  background: linear-gradient(135deg,
    rgba(160, 134, 84, 0.05) 0%,
    rgba(184, 85, 63, 0.04) 100%);
  border: 1px solid var(--ivoire-fonce);
  border-left: 5px solid var(--terracotta);
  border-radius: 4px;
  padding: 1.5rem 2rem;
  margin: 0.5rem 0 1rem;
}

.portrait-synthetique p {
  margin-bottom: 1rem;
  line-height: 1.75;
  font-size: 0.96rem;
  color: var(--encre);
}

.portrait-synthetique p:last-child { margin-bottom: 0; }

.portrait-synthetique strong {
  color: var(--terracotta);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   ENCADRÉS D'INTERPRÉTATION (v3.0) — pour chaque section du thème natal
══════════════════════════════════════════════════════════════════════════ */
.interp-box {
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
  margin: 1rem 0 1.5rem;
  border-left: 5px solid var(--terracotta);
  background: var(--ivoire-clair);
  position: relative;
}

.interp-box.favorable {
  border-left-color: var(--semantic-favorable);
  background: var(--semantic-favorable-bg);
}

.interp-box.vigilance {
  border-left-color: var(--semantic-vigilance);
  background: var(--semantic-vigilance-bg);
}

.interp-box.tension {
  border-left-color: var(--semantic-tension);
  background: var(--semantic-tension-bg);
}

.interp-box.neutre {
  border-left-color: var(--semantic-neutre);
  background: var(--semantic-neutre-bg);
}

.interp-box-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--terracotta);
  margin: 0 0 0.7rem 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  letter-spacing: 0.01em;
}

.interp-box.favorable .interp-box-title { color: var(--semantic-favorable); }
.interp-box.vigilance .interp-box-title { color: var(--semantic-vigilance); }
.interp-box.tension .interp-box-title   { color: var(--semantic-tension); }
.interp-box.neutre .interp-box-title    { color: var(--semantic-neutre); }

.interp-box-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.interp-box p {
  margin-bottom: 0.7rem;
  line-height: 1.7;
  font-size: 0.93rem;
  color: var(--encre);
}

.interp-box p:last-child { margin-bottom: 0; }

.interp-box ul {
  margin: 0.5rem 0 0.7rem 1.4rem;
  font-size: 0.92rem;
  line-height: 1.65;
}

.interp-box ul li { margin-bottom: 0.35rem; }

.interp-box strong {
  color: var(--encre);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   PUCES DE COULEUR DANS LES TABLEAUX (v3.0) — code visuel rapide
══════════════════════════════════════════════════════════════════════════ */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.dot-favorable { background: var(--semantic-favorable); }
.dot-vigilance { background: var(--semantic-vigilance); }
.dot-tension   { background: var(--semantic-tension); }
.dot-neutre    { background: var(--semantic-neutre); }

/* Aspect badges colorés en plus du symbole */
.aspect-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  margin-left: 0.4rem;
  text-transform: uppercase;
}

.aspect-badge.favorable {
  background: var(--semantic-favorable-bg-strong);
  color: var(--semantic-favorable);
}

.aspect-badge.vigilance {
  background: var(--semantic-vigilance-bg-strong);
  color: var(--semantic-vigilance);
}

.aspect-badge.tension {
  background: var(--semantic-tension-bg-strong);
  color: var(--semantic-tension);
}