/* =========================================================
   SYNASTRIE — UI Astraema (stable)
   Basé sur progresse.css, adapté pour la page Synastrie.
   - Boutons Calculer en rouge brique (via inline <style>)
   - Onglet 1 = Synastrie (Natal A + Natal B + intervertir)
   - Onglet 2 = Transit (jaune, pour les pro)
   ========================================================= */

/* ═══ Bouton intervertir ⇄ ═══ */
.synSwapRow{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
}
.btnSwap{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(148,54,29,0.25);
  background: #fff;
  color: #94361D;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
  box-shadow: 0 2px 8px rgba(148,54,29,0.10);
}
.btnSwap:hover{
  background: rgba(148,54,29,0.06);
  border-color: rgba(148,54,29,0.45);
  transform: rotate(180deg);
  box-shadow: 0 4px 14px rgba(148,54,29,0.18);
}
.btnSwap:active{
  transform: rotate(180deg) scale(0.95);
}

/* ═══ Labels Anneau dans le formulaire synastrie ═══ */
.synRingLabel{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 800;
  color: #94361D;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.synRingLabel .synRingDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.synRingDot.ring1dot{ background: #172852; }
.synRingDot.ring2dot{ background: #3589b2; }


/* Couleur du contour selon anneau actif */
.ringFrame{
  --ringColor: #172852;
  width: 100%;
  box-sizing: border-box;
}
.ringFrame.ring1{ --ringColor: #172852; }
.ringFrame.ring2{ --ringColor: #3589b2; }
.ringFrame.ring3{ --ringColor: #D4A048; }

/* =========================
   Onglets
   ========================= */
.progTabs{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content: center;

  padding: 14px 14px;
  margin: 0 0 14px 0;

  border-radius: 18px;
  background: rgba(247,246,242,0.70);
  border: 1px solid rgba(23,40,82,0.12);
}


.progTab{
  min-width: 148px;
  padding: 12px 26px;
  text-align:center;

  border-radius: 999px;
  cursor:pointer;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  background: #fff;
  color:#172852;

  border: 2px solid rgba(23,40,82,0.18);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.progTab:hover{
  transform: translateY(-1px);
  border-color: rgba(23,40,82,0.35);
}

.progTab.active{
  border-color: var(--ringColor);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* =========================
   Panels
   ========================= */
.progPanel{
  background:#fff;
  border: 2px solid var(--ringColor);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);

  width: 100%;
  box-sizing: border-box;
}

.progPanelTitle{
  margin: 0 0 14px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 900;
  color:#333;
}

/* =========================
   IMPORTANT : neutraliser la mise en page du <form> (theme.css met les forms en grid)
   On garde le <form> UNIQUEMENT pour le style du bouton .btnCalc
   ========================= */
#formBox form.progForm{
  display: contents;
}

/* =========================
   Sous-bloc (même structure partout)
   ========================= */
.progSubBlock{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(23,40,82,0.10);
  background: #fff;
}

/* =========================
   Grille
   ========================= */
.progRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 22px;
  align-items:start;  /* labels et champs alignés en haut de chaque cellule */
}
.progRow .full{ grid-column: 1 / -1; }

/* Inputs 100% : évite “tassé à gauche” */
.ringFrame .progPanel input,
.ringFrame .progPanel select{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* =========================
   Radios
   ========================= */
.progRadios{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding-top: 2px;
}
.progRadio{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  color:#333;
}

/* =========================
   Définir / Utiliser lieu : pleine largeur, aligné gauche
   ========================= */
.defineBaseCell{
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: start;
  margin-top: 6px;
}

/* Toutes les checkboxes label de ce formulaire — style uniforme */
.progDefineBase {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  cursor: pointer;
}

/* Texte des checkboxes — même police, même taille, PAS de caps lock */
.progDefineBase span {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* Case à cocher — même taille partout */
.progDefineBase input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin: 0;
  cursor: pointer;
}

/* Champ date verrouillé automatiquement (verrou personne / transit) */
input[type="date"]:disabled {
  background: #f0f0f0;
  color: #888;
  cursor: not-allowed;
  border-color: rgba(23,40,82,0.12);
}

/* Hint sous les champs date (verrouillé ou libre) */
.dateHint {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.3;
  min-height: 1.3em;
}
.dateHint--locked {
  color: #888;
}
.dateHint--free {
  color: #3589b2;
}



/* =========================================================
   Inspecteurs anneaux — sous la roue
   ========================================================= */

/* ── Inspecteur positionné comme un sectionAcc natal ── */
.ringInspectors{
  margin-top: 14px;
}

/* ringInspector EST maintenant un details.sectionAcc — on hérite du style natal.
   On surcharge uniquement ce qui diffère de #positions details.sectionAcc */
.ringInspector.sectionAcc{
  background: #fff;
  padding: 14px 18px;
  border: var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  margin-top: 14px;
}
.ringInspector.sectionAcc > summary.sectionSum{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.ringInspector.sectionAcc > summary.sectionSum::-webkit-details-marker{ display: none; }
.ringInspector.sectionAcc > summary.sectionSum .sectionTitle{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #172852;
}
.ringInspector.sectionAcc > summary.sectionSum .proOpenAllBtn{
  margin-left: auto;
  flex: 0 0 auto;
}
.ringInspector.sectionAcc > .sectionBody{
  padding-top: 12px;
}

.ringInspectorHeader{
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* switch à droite, plus de titre ici (il est dans summary) */
  margin-bottom: 10px;
}

.ringSwitch{
  display:inline-flex;
  border:1px solid #d8d0c6;
  border-radius:999px;
  overflow:hidden;
}

.ringSwitch button{
  border:0;
  background:transparent;
  padding:6px 10px;
  font:inherit;
  cursor:pointer;
}

.ringSwitch button.active{
  background: #172852;
  color: #fff;
}

.ringTable{
  width:100%;
  border-collapse:collapse;
}

.ringTable th, .ringTable td{
  padding:8px 10px;
  border-bottom:1px solid #eee;
  vertical-align:top;
}

.ringTable th{
  text-align:left;
  font-weight:600;
}

.ringHouses{
  list-style:none;
  padding-left:0;
  margin:0;
}

.ringHouses li{
  padding:6px 0;
  border-bottom:1px solid #eee;
}

.muted{
  color:#6b6257;
  font-size:12px;
}

.ringDebug{
  margin-top: 10px;
  font-size: 12px;
  color:#6b6257;
  background:#fff;
  border:1px dashed rgba(23,40,82,0.15);
  border-radius:10px;
  padding:10px;
}

.ringDebug summary{
  cursor:pointer;
  font-weight:600;
  margin-bottom:6px;
}


/* --- Comparateur heure de référence --- */
.secondaryBtn{
  margin-left: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #d8d0c6;
  background: #fff;
  cursor: pointer;
}
.secondaryBtn:disabled{opacity:0.6; cursor:default;}
.timeCompareBox{
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e2ddd5;
  border-radius: 14px;
  background: #fff;
}
.timeCompareNote{font-size:12px; color:#6b6257; margin:6px 0 12px 0;}
.timeCompareTable{width:100%; border-collapse: collapse; font-size: 13px;}
.timeCompareTable th, .timeCompareTable td{border-bottom:1px solid #eee; text-align:left; padding:8px 6px; vertical-align:top;}
.timeCompareTable thead th{font-size:12px; color:#6b6257;}


/* ===== Comparaison heure de référence (progressé) ===== */
.progCalcLeft{
  display:flex;
  justify-content:flex-start;
  margin-top: 8px;
}

.btnSecondary{
  background:#fff;
  border:1px solid #d0d5e0;
  color:#222;
}
.btnSecondary:hover{ filter:brightness(0.97); }

.timeCompareBox{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e2ddd5;
  border-radius: 14px;
  background: #fff;
}
.timeCompareBox h3{ margin:0 0 6px 0; font-size: 15px; }
.timeCompareNote{ font-size: 12px; color:#6b6257; margin-bottom:10px; }
.timeCompareTableWrap{ overflow:auto; }
.timeCompareTable{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
.timeCompareTable th, .timeCompareTable td{
  border-bottom: 1px solid #eee;
  padding: 8px 10px;
  text-align:left;
  white-space: nowrap;
}
.timeCompareTable thead th{
  font-weight: 700;
  background: #fff;
}


/* =========================
   Liste positions (layout thème natal)
   ========================= */
.ringPosList {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ringPosList li {
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  line-height: 1.4;
}

.ringPosList li strong {
  color: #172852;
}

.retroR {
  color: #b03030;
  font-size: 12px;
  margin-left: 2px;
}


/* =========================
   Ligne de boutons : Nettoyer | Reset | Calculer
   ========================= */
.progCalcRow {
  grid-column: 1 / -1;
  /* Cette ligne est une case d'une grille. Par défaut, une case de
     grille refuse de devenir plus étroite que son contenu : la colonne
     s'élargissait pour loger les trois boutons, et c'est la CARTE ENTIÈRE
     qui débordait — le repli de la ligne ne se déclenchait jamais.
     min-width: 0 lève ce refus. */
  min-width: 0;
  display: flex;
  /* Les boutons peuvent passer à la ligne. Depuis que « Reset anneaux »
     est insécable, il ne se coupe plus en deux — mais si la colonne est
     étroite, il faut bien que quelque chose cède : c'est la LIGNE qui
     se replie, pas le mot. Sans ça, le bouton sortait du cadre du
     formulaire. */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* « Calculer » reste à droite, y compris quand la ligne s'est repliée */
.progCalcRow .btnCalc {
  margin-left: auto;
}

.progCalcRow .progCalcLeft {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

/* Boutons « Nettoyer » et « Reset anneaux » — même règle pour les deux,
   pour qu'ils restent jumeaux. `white-space: nowrap` empêche « Reset
   anneaux » de se couper en deux lignes, `min-height` leur donne la même
   hauteur quoi qu'il arrive. */
/* Boutons « Nettoyer » et « Reset ».

   On ne leur invente plus de style : ils reprennent EXACTEMENT celui du
   thème natal, où « Nettoyer » et « Enregistrer » sont deux pastilles de
   même taille. Cette allure vient de `#formBox form .btn` dans theme.css
   — pastille, 13 px, petites capitales — et s'applique déjà à ces
   boutons puisqu'ils portent la classe .btn.

   Il ne reste donc ici que ce qui les distingue l'un de l'autre : la
   couleur de leur contour, reprise elle aussi du natal (gris clair pour
   Nettoyer, doré pour le second bouton). Tout le reste — taille, forme,
   graisse — vient d'un seul endroit, pour les quatre pages. */
#formBox form .btnClean{
  border-color: #e1e4f0;
  background: #fff;
}
#formBox form .btnClean:hover{ background: #f3f5fb; }

#formBox form .btnReset{
  border-color: rgba(212,160,72,0.55);
  color: var(--astra-navy, #172852);
  background: #fff;
}
#formBox form .btnReset:hover{ background: rgba(243,217,135,0.22); }

/* =========================
   Roue + sidePanel : layout grid comme theme.html
   wheelCard (roue) à gauche, sidePanel (accordéons + textbox) à droite
   Par défaut caché — JS ajoute la classe .pwheel-shown pour révéler
   ========================= */
#wheelArea {
  display: none;                         /* caché par défaut */
  width: min(var(--pageW, 1100px), calc(100% - (var(--pagePad, 40px) * 2)));
  margin: 8px auto 0 auto;              /* remonté au maximum */
  box-sizing: border-box;
}
#wheelArea.pwheel-shown {
  display: grid;                         /* grid 2 colonnes comme theme.css */
  grid-template-columns: minmax(0, var(--wheelCol, 768px)) minmax(0, 1fr);
  gap: var(--gapW, 16px);
  align-items: stretch;
}

#wheelCard {
  width: 100% !important;
  background: #fff;
  border: var(--cardBorder, 1px solid rgba(23,40,82,0.12));
  border-radius: var(--cardRadius, 16px);
  box-shadow: var(--cardShadow, 0 8px 22px rgba(0,0,0,0.08));
  padding: 10px 26px 26px 26px;     /* padding haut réduit pour remonter */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* ── Ligne du haut : titre à gauche, badge+aide à droite ── */
#wheelTopBar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 10px;
}
#wheelTopRight{
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Colonne droite : sections empilées */
#sidePanel{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
  caret-color: transparent;  /* supprime le tiret clignotant */
}

/* ── Séparateurs accordéon (Temps / Sub-menu) ── */
.sideSection{
  background: #fff;
  border: var(--cardBorder, 1px solid rgba(23,40,82,0.12));
  border-radius: var(--cardRadius, 16px);
  box-shadow: var(--cardShadow, 0 8px 22px rgba(0,0,0,0.08));
  flex: 0 0 auto;
  overflow: hidden;
}
.sideSummary{
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #172852;
  cursor: pointer;
  user-select: none;
  list-style: none;         /* supprime le triangle natif */
  display: flex;
  align-items: center;
  gap: 6px;
}
.sideSummary::-webkit-details-marker{ display:none; }
.sideSummary::before{
  content: "▸";
  font-size: 11px;
  transition: transform .15s ease;
}
.sideSection[open] > .sideSummary::before{
  transform: rotate(90deg);
}
/* Spans secondaires dans sideSummary (ex: vue active) — petit, gris */
.sideSummary span{
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #555;
  font-size: 12px;
}
/* submenuLabel = texte principal du sous-menu, identique au texte Temps
   (hérite uppercase/gras/bleu de .sideSummary via le span mais on surcharge) */
.sideSummary #submenuLabel{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #172852;
  font-size: 13px;
}
/* Tag vue (Vue Classique, etc.) — avant le label, tag pill discret */
.submenuViewTag{
  background: rgba(23,40,82,0.08);
  color: #172852;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}
.sideSectionBody{
  padding: 8px 14px 12px 14px;
  font-size: 13px;
  line-height: 1.35;
  border-top: 1px solid rgba(23,40,82,0.08);
}

/* modePanel : contenu du sous-menu dans le séparateur sub-menu */
/* theme.css lui donne fond+bordure+ombre, mais ici il est DANS .sideSection
   qui fournit déjà la carte → on enlève le doublon */
#modePanel{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.35;
}
/* Visibilité des data-submenu : gérée par theme.css via body[data-mode] */

/* Text box : prend l'espace restant */
#analysisBox{
  background: #fff;
  border: var(--cardBorder, 1px solid rgba(23,40,82,0.12));
  border-radius: var(--cardRadius, 16px);
  box-shadow: var(--cardShadow, 0 8px 22px rgba(0,0,0,0.08));
  padding: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  font-size: 14px;
  line-height: 1.45;
}

/* Responsive : roue au-dessus, panneau dessous */
@media (max-width: 980px){
  #wheelArea.pwheel-shown{
    grid-template-columns: 1fr;
  }
  #sidePanel{
    max-width: none;
    justify-self: stretch;
  }
}

/* ── Titre : à gauche, compact ── */
#wheelTitle {
  flex: 1;
  text-align: left;
  padding: 0 0 4px 4px;
  font-family: Merriweather, serif;
  line-height: 1.4;
  min-height: 1em;
}
#wheelTitle .wt-line {
  display: block;
  color: #1e1e1e;
}
#wheelTitle .wt-line-1 {
  font-size: 16px;
  font-weight: 900;
}
#wheelTitle .wt-line-2,
#wheelTitle .wt-line-3 {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

#wheelBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* SVG : centré, taille max 714px (identique natal) */
#wheelBox svg,
#svg {
  width: min(100%, 714px);
  max-width: 714px;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
}

#positions {
  width: min(var(--pageW, 1100px), calc(100% - (var(--pagePad, 40px) * 2)));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ── Séparateur Aspects (sous les positions, séparé) ── */
#aspectsSeparator{
  width: min(var(--pageW, 1100px), calc(100% - (var(--pagePad, 40px) * 2)));
  margin: 20px auto 0 auto;
  box-sizing: border-box;
}
#aspectsSeparator h2{
  font-size: 18px;
  font-weight: 900;
  color: #172852;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(23,40,82,0.12);
}
/* ===== Séparateur de type dans les positions (Prog. / Natal / Transit) ===== */
.ringPosLabel {
  border-bottom: none !important;
  padding: 2px 0 4px !important;
}
.ringPosType {
  font-size: 12px;
  font-weight: 700;
  color: #A65440;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Angles dans les positions : même style que planètes */
.ringPosList li em {
  font-style: normal;
  font-weight: 600;
  color: inherit;
}

/* Bouton Effacer anneau 3 */
.btnClearRing3 {
  background: #fff !important;
  border: 1px solid #ccc !important;
  color: #555 !important;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
}
.btnClearRing3:hover {
  background: #f5f5f5 !important;
}

/* ===== Format ligne de position (type + interception) ===== */
.posType {
  /* même taille et police que la ligne, juste gras */
  font-weight: 700;
  font-style: normal;
  color: #172852;
  margin: 0 1px;
}
.intTag {
  font-size: 14px;     /* plus grand pour ressortir */
  color: #7070C0;
  font-weight: 700;
  font-style: italic;
}
/* (R.) dans les positions de la liste */
.retroTag {
  font-size: 14px;
  color: #b03030;
  font-weight: 700;
}
/* angles : même style que les planètes, aucune couleur spéciale */
.posAngle {
  font-weight: 600;
  font-style: normal;
  color: inherit;
}

/* ===== Panneau temps — caché par défaut, visible quand la roue est affichée ===== */
.progTimePanel {
  display: none;                              /* désactivé : Temps est dans le sidePanel */
}
.progTimePanel.pwheel-shown {
  display: none;                              /* reste caché — contenu migré dans sidePanel */
}

/* ===== Scroll sidebar : hauteurs adaptées selon ce que l'onglet affiche ====== */
/* Favoris/Récents : items à 1 ligne (juste le nom). 6 × 40 = 240px */
#tab-fav.sideListScroll,
#tab-recent.sideListScroll {
  max-height: 240px;
  overflow-y: auto;
}
/* Dossier : items à 2 lignes (nom + ville/date/heure). 6 × 57 ≈ 350px */
#tab-folder.sideListScroll {
  max-height: 350px;
  overflow-y: auto;
}

/* ─── Styles des items sidebar (repris de theme.css) ───
   Sans ces règles, l'onglet "Dossier" affichait nom + meta tous en gros gras,
   parce que .sideMeta n'était pas défini sur cette page. */
#sideBox .sideItem{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
#sideBox .sideLink{
  text-decoration:none;
  color:#172852;
  font-weight:600;
  flex:1 1 auto;
  min-width:0;
}
#sideBox .sideLinkInner{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
#sideBox .sideMeta{
  font-size:12px;
  color:#666;
  font-weight:500;
}
/* L etoile des favoris de l historique est maintenant decrite une seule
   fois dans base.css : la meme regle etait recopiee ici et dans les trois
   autres feuilles de page. */
/* Scrollbar discrète */
#tab-fav.sideListScroll::-webkit-scrollbar,
#tab-recent.sideListScroll::-webkit-scrollbar,
#tab-folder.sideListScroll::-webkit-scrollbar { width:6px; }
#tab-fav.sideListScroll::-webkit-scrollbar-thumb,
#tab-recent.sideListScroll::-webkit-scrollbar-thumb,
#tab-folder.sideListScroll::-webkit-scrollbar-thumb {
  background:#d6d9ea;
  border-radius:3px;
}

/* ─── Bouton "Dossier ▼" + son dropdown (partagé avec theme.css) ─── */
.sideTabs .folderTabWrap{ position:relative; }
.tabBtn.folderTab{ display:inline-flex; align-items:center; gap:4px; }
.tabBtn.folderTab .caret{ font-size:9px; opacity:0.7; }
.folderDropdown{
  display:none;
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  z-index: 50;
  background:#fff;
  border:1px solid #d6d9ea;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  padding:6px;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
}
.folderDropdown.open{ display:block; }
.folderDropdown button{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:8px 10px;
  border-radius:8px;
  font-size:12px;
  color:#333;
  cursor:pointer;
}
.folderDropdown button:hover{ background:#f3f7ff; }
.folderDropdown button.active{ background:#f0f4ff; font-weight:700; }
.folderDropdown .dot{
  width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0;
}
.folderDropdown .cnt{ font-size:11px; color:#888; margin-left:auto; }
.folderDropdown .empty{
  font-size:11px; color:#888; font-style:italic; padding: 8px 10px;
}

/* =========================================================
   ASPECTS — badge, séparateur, accordéons
   ========================================================= */

/* ── Badge aspects (en haut à droite, dans wheelTopBar) ── */
.aspectBadge{
  flex-shrink: 0;
  white-space: nowrap;
  background: #fff;
  border: 1px solid rgba(23,40,82,0.15);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: opacity .15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* Aide sous le badge (côté droit) */
.aspectHint{
  font-size: 10px;
  color: #999;
  user-select: none;
  white-space: nowrap;
}
.aspSep{
  color: #999;
  margin: 0 1px;
}
.aspSem{
  color: #888;
  font-weight: 400;
  font-size: 11px;
}

/* Sur téléphone, le badge d'aspects garde « Aspects : R1–R2 » mais perd le
   libellé entre parenthèses (« Transit–Transit », « Natal–Transit »…) :
   la ligne de titre au-dessus dit déjà de quels anneaux il s'agit, et
   cette répétition mangeait toute la largeur. */
@media (max-width: 768px){
  .aspSem{ display: none; }
}

/* Pastille compteur (dans les accordéons) */
.aspCount{
  display: inline-block;
  background: #172852;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Tag filtre objet ── */
#aspectFilterTag{
  display: inline-block;
  margin-left: 8px;
  background: #E0503B;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
}
#aspectFilterTag:hover{
  background: #c03a28;
}

/* ── Séparateur Aspects ── */
#aspectsSeparator h2{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #172852;
  margin: 28px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(23,40,82,0.12);
}

/* ── Accordéons ── */
.aspAccordion{
  margin-bottom: 8px;
  border: 1px solid rgba(23,40,82,0.10);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.aspAccordion[open]{
  border-color: rgba(23,40,82,0.20);
}
.aspAccordion.aspActive{
  border-color: rgba(23,40,82,0.35);
  box-shadow: 0 3px 12px rgba(23,40,82,0.08);
}
.aspAccordion summary{
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  user-select: none;
  background: #fff;
}
.aspAccordion summary::-webkit-details-marker{ display: none; }
.aspAccordion summary::before{
  content: "▸ ";
  color: #999;
  margin-right: 4px;
}
.aspAccordion[open] summary::before{
  content: "▾ ";
}

/* ── Groupes par planète source ── */
.aspGroup{
  padding: 2px 16px 8px;
}
.aspGroupTitle{
  font-size: 12px;
  font-weight: 900;
  color: #172852;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 10px 0 4px 0;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(23,40,82,0.08);
}

/* ── Listes d'aspects ── */
.aspList{
  list-style: none;
  margin: 0;
  padding: 0;
}
.aspList li{
  font-size: 12.5px;
  padding: 3px 0;
  color: #333;
  line-height: 1.5;
}
.aspList li.aspMinor{
  opacity: 0.7;
  font-style: italic;
}
.aspDot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.aspOrb{
  color: #888;
  font-size: 11.5px;
}
/* ══════════════════════════════════════════════════════════
   SUB-MENU AFFICHAGE > VUES : 2 colonnes dans rectangle beige
   (équivalent du data-aff-tab="reseau" sur la page natal
    qui est stylé dans theme.css — ici on cible "vues")
   ══════════════════════════════════════════════════════════ */

/* Rectangle blanc + grille 2 colonnes */
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="vues"] .subBtns {
  background: #fff;
  border: 1px solid rgba(23,40,82,0.08);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Les boutons remplissent leur cellule */
[data-submenu="affichage"] .affTabPanel[data-aff-tab="vues"] .subBtns .viewBtn {
  width: 100%;
}

/* Mobile : 1 seule colonne */
@media (max-width: 520px) {
  #modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="vues"] .subBtns {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   ASPECTS — design identique au panneau natal
   Les classes sectionAcc/sectionSum/sectionTitle/sectionBody/proOpenAllBtn
   sont stylées dans theme.css sous #positions — on les applique ici
   via #aspectsSeparator pour éviter de tout réécrire.
   ══════════════════════════════════════════════════════════ */

/* Panneau blanc identique à #positions */
#aspectsSeparator{
  margin: 30px auto;
  background: #fff;
  padding: 28px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
}

/* Panneau Positions : même carte blanche */
#positions{
  margin: 30px auto;
  background: #fff;
  padding: 28px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
}

/* Analyses comparatives : chaque section = une carte comme Positions/Aspects */
#synCompare{
  width: min(var(--pageW, 1100px), calc(100% - (var(--pagePad, 40px) * 2)));
  margin: 0 auto;
  box-sizing: border-box;
}
#synCompare details.sectionAcc{
  margin: 30px 0;
  background: #fff;
  padding: 28px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
}
/* Mise en page et police de l'en-tête : bloc commun
   « EN-TÊTES DES SÉPARATEURS » dans theme.css. On ne garde ici que ce qui
   est propre à la page. */
#positions details.sectionAcc > summary.sectionSum,
#aspectsSeparator details.sectionAcc > summary.sectionSum,
#synCompare details.sectionAcc > summary.sectionSum{
  cursor: pointer;
  user-select: none;
  list-style: none;
}
#positions details.sectionAcc > summary.sectionSum::-webkit-details-marker,
#aspectsSeparator details.sectionAcc > summary.sectionSum::-webkit-details-marker,
#synCompare details.sectionAcc > summary.sectionSum::-webkit-details-marker{ display: none; }
#positions details.sectionAcc > .sectionBody,
#aspectsSeparator details.sectionAcc > .sectionBody,
#synCompare details.sectionAcc > .sectionBody{
  padding-top: 10px;
}

/* 2 colonnes pour les listes d'aspects — même règle que #positions ul */
#aspectsAccordions .aspSubList{
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  columns: 2;
  column-gap: 32px;
}
#aspectsAccordions .aspSubList > li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid #e5e5ee;
  font-size: 14px;
}

/* Accordéon de paire (R1–R2) — sobre, blanc */
#aspectsAccordions .aspAccordion{
  margin-bottom: 6px;
}
#aspectsAccordions .aspAccordion > summary{
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
#aspectsAccordions .aspAccordion > summary::-webkit-details-marker{ display: none; }
#aspectsAccordions .aspAccordion.aspActive > summary{
  font-weight: 700;
}

/* Sous-accordéon (Conjonction, Soleil, Exact…) — sobre comme natal */
#aspectsAccordions .aspSubAcc{
  margin-bottom: 2px;
}
#aspectsAccordions .aspSubAcc > summary{
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 3px 0;
}
#aspectsAccordions .aspSubAcc > summary::-webkit-details-marker{ display: none; }

#aspectsAccordions .aspAccBody{ padding-top: 4px; }

/* Préfixe anneau : petit + discret */
.aspRingPrefix{
  font-size: inherit;
  font-weight: 700;
  color: #172852;
  opacity: 0.65;
  letter-spacing: 0.02em;
}
/* R rétrograde dans les aspects */
.aspRetroTag{
  font-size: inherit;
  color: #b03030;
  font-weight: 700;
  cursor: help;
}
/* Int intercepté dans les aspects */
.aspIntTag{
  font-size: inherit;
  color: #7070C0;
  font-weight: 700;
  font-style: italic;
  cursor: help;
}
/* Phase App./Sép./Exact */
.aspPhaseTag{
  color: #777;
  font-style: italic;
  font-size: inherit;
}

/* Mobile : 1 colonne */
@media (max-width: 600px){
  #aspectsAccordions .aspSubList{ columns: 1; }
}


/* ═══════════════════════════════════════════════════════
   AFFICHAGE PRO — Badges anneaux (segments colorés)
   Couleurs dynamiques = mêmes que .ringFrame.ring1/2/3
   ═══════════════════════════════════════════════════════ */

/* Variables couleurs anneaux (source unique) */
:root{
  --ring1Color: #172852;
  --ring2Color: #3589b2;
  --ring3Color: #D4A048;
}

/* ── Nom de l'objet dans la ligne (flex avec le badge) ── */
.proObjName{
  flex: 1 1 auto;
  min-width: 0;
}
/* ── Noms longs (N. Nord v, N. Sud m) : police réduite pour rester sur 1 ligne ── */
.proObjNameFit{
  font-size: 0.85em;
  white-space: nowrap;
}

/* ── Badge = conteneur horizontal de 1 à 3 segments ── */
.ringBadge{
  display: inline-flex;
  align-items: center;
  gap: 5px;               /* espacement entre segments */
  width: 44px;             /* plus large pour bien cliquer */
  height: 14px;            /* plus haut pour bien voir */
  flex-shrink: 0;
  cursor: pointer;
  margin-left: auto;
  padding: 3px 4px;
  border-radius: 5px;
  position: relative;
  transition: opacity .15s;
}
.ringBadge:hover{
  opacity: 0.8;
}

/* ── Segment individuel (1 par anneau) ── */
.ringBadge .ringSeg{
  flex: 1;
  height: 100%;
  border-radius: 3px;
  min-width: 8px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

/* Segment actif : couleur de l'anneau correspondant */
.ringBadge .ringSeg[data-seg="1"].on{ background: var(--ring1Color); }
.ringBadge .ringSeg[data-seg="2"].on{ background: var(--ring2Color); }
.ringBadge .ringSeg[data-seg="3"].on{ background: var(--ring3Color); }

/* Segment NÉON : l'objet est impliqué dans les aspects dessinés. */
.ringBadge .ringSeg[data-seg="1"].neon{
  background: var(--ring1Color);
  box-shadow: 0 0 2px 1px var(--ring1Color), 0 0 5px 1px rgba(23,40,82,0.21);
}
.ringBadge .ringSeg[data-seg="2"].neon{
  background: var(--ring2Color);
  box-shadow: 0 0 2px 1px var(--ring2Color), 0 0 5px 1px rgba(53,137,178,0.21);
}
.ringBadge .ringSeg[data-seg="3"].neon{
  background: var(--ring3Color);
  box-shadow: 0 0 2px 1px var(--ring3Color), 0 0 5px 1px rgba(212,160,72,0.21);
}

/* Segment inactif : gris léger + bordure discrète */
.ringBadge .ringSeg:not(.on){
  background: rgba(200,200,200,0.25);
  border: 1px solid rgba(150,150,150,0.30);
}

/* Segment masqué (anneau pas actif dans la config) */
.ringBadge .ringSeg.hidden{
  display: none;
}

/* ── Segments cliquables : curseur pointer quand ≥2 anneaux ── */
.ringBadge .ringSeg{
  cursor: pointer;
}

/* ── Barre globale anneaux (au-dessus de la liste Objets) ── */
.ringGlobalBar{
  margin: 8px 0 4px 0;
  padding: 8px 10px;
  background: rgba(247,246,242,0.55);
  border: 1px solid #e5e5ee;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Masqué si 1 seul anneau */
.ringGlobalBar.hidden{
  display: none;
}

.ringGlobalRow{
  display: flex;
  align-items: center;
  gap: 6px;
}
.ringGlobalLabel{
  font-size: 11px;
  font-weight: 700;
  color: #555;
  min-width: 50px;
}
/* Boutons Tout [1] [2] [3] */
.ringGlobalBtn{
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid rgba(23,40,82,0.20);
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
/* États colorés des boutons globaux */
.ringGlobalBtn.allOn[data-ring-global="1"]{
  background: var(--ring1Color); color: #fff; border-color: var(--ring1Color);
}
.ringGlobalBtn.allOn[data-ring-global="2"]{
  background: var(--ring2Color); color: #fff; border-color: var(--ring2Color);
}
.ringGlobalBtn.allOn[data-ring-global="3"]{
  background: var(--ring3Color); color: #fff; border-color: var(--ring3Color);
}
/* Partiel = fond semi-transparent */
.ringGlobalBtn.partial[data-ring-global="1"]{
  background: rgba(23,40,82,0.25); color: #fff; border-color: var(--ring1Color);
}
.ringGlobalBtn.partial[data-ring-global="2"]{
  background: rgba(53,137,178,0.35); color: #fff; border-color: var(--ring2Color);
}
.ringGlobalBtn.partial[data-ring-global="3"]{
  background: rgba(212,160,72,0.40); color: #fff; border-color: var(--ring3Color);
}
/* Bouton masqué (anneau pas actif) */
.ringGlobalBtn.hidden,
.ringCopyBtn.hidden{
  display: none;
}

/* Boutons Copier 1→2 etc. */
.ringCopyRow{
  font-size: 10px;
}
.ringCopyBtn{
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: #777;
  transition: background .12s;
}
.ringCopyBtn:hover{
  background: #f3f5fb;
}

/* ── aspCheck dans le Pro progressé : flex pour aligner badge à droite ── */
[data-submenu="pro"] .proCheckList .aspCheck{
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Cacher la checkbox des OBJETS — le clic se fait sur le nom ou les segments */
[data-submenu="pro"] .aspCheck input[data-pro-object],
[data-submenu="pro"] .aspCheck input[data-pro-point]{
  display: none;
}
/* Nom cliquable (toggle tous les anneaux d'un coup) */
[data-submenu="pro"] .proCheckList .proObjName{
  cursor: pointer;
  user-select: none;
}

/* ── Bouton Appliquer du Pro progressé ── */
#progBtnProApply{
  border: 2px solid #94361D;
  color: #94361D;
  background: #fff;
  font-weight: 800;
  margin-left: auto;
}
#progBtnProApply:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════
   TRACÉ LIBRE — styles spécifiques
   ═══════════════════════════════════════ */

/* Résultat mini sous la palette */
.proTraceBox{
  min-height: 20px;
  font-size: 12px;
  padding: 2px 0 6px;
}

/* Bouton effacer tracés */
[data-pro-panel="trace"] .proBottomAction{
  margin-top: 8px;
}

/* ═══════════════════════════════════════
   PARAMÈTRES — grille 2 colonnes (Points)
   ═══════════════════════════════════════ */
.progPointsGrid{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

/* ═══ Onglets Paramètres / Paramètres Pro ═══ */
.progParamTopTabs{
  display: flex;
  gap: 8px;
  margin: 8px 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5ee;
  flex-wrap: wrap;
}
.progParamTopBtn{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e1e4f0;
  background: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.progParamTopBtn.active{
  background: #172852;
  color: #fff;
  border-color: #172852;
}

/* Conteneur des cartes Pro */
.progParamProWrap{
  background: rgba(247,246,242,0.65);
  border: 1px solid #e5e5ee;
  border-radius: 14px;
  padding: 10px;
  margin-top: 8px;
}

/* Cartes blanches individuelles */
.progParamCard{
  background: #fff;
  border: 1px solid rgba(23,40,82,0.10);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}
.progParamCard:last-child{
  margin-bottom: 0;
}

/* Titre de carte */
.progParamCardTitle{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #333;
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════
   ANALYSE COMPARATIVE — Deux colonnes
   ═══════════════════════════════════════ */
.synCmpGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media(max-width:640px){
  .synCmpGrid{ grid-template-columns: 1fr; }
}
.synCmpCol{
  background: rgba(247,246,242,0.5);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #e8e5df;
}
/* Titre personne (en-tête de colonne) */
.synCmpCol .cmpName{
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e1e4f0;
  text-align: center;
}
.synCmpCol[data-cmp-ring="1"] .cmpName{ color: #172852; border-color: #172852; }
.synCmpCol[data-cmp-ring="2"] .cmpName{ color: #3589b2; border-color: #3589b2; }

/* Ligne d'info */
.cmpRow{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;
}
.cmpRow + .cmpRow{ border-top: 1px solid #f0f1f5; }
.cmpLbl{ font-weight: 700; color: #555; min-width: 80px; }
.cmpVal{ text-align: right; color: #222; }

/* Sous-titre de section dans une colonne */
.cmpSubTitle{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: #94361D;
  margin: 12px 0 6px;
  padding-top: 8px;
  border-top: 1.5px solid rgba(148,54,29,0.12);
}
.cmpSubTitle:first-child{ margin-top: 0; border-top: none; padding-top: 0; }

/* Pilules compactes (planètes, signes) */
.cmpPill{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(148,54,29,0.06);
  color: #333;
  margin: 2px 2px;
}

/* Carte karma individuelle */
.cmpKarmaCard{
  background: rgba(148,54,29,0.03);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0;
  font-size: 12.5px;
  line-height: 1.6;
}
.cmpKarmaCard .cmpKarmaTitle{
  font-weight: 800;
  color: #94361D;
  font-size: 13px;
  margin-bottom: 4px;
}

/* Erreur / pas de données */
.cmpEmpty{
  font-size: 12px;
  color: #999;
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}
/* ═══════════════════════════════════
   CLÉ D'ISHTAR dans la grille comparative
   ═══════════════════════════════════ */
.synCmpCol .ciPosition{
  padding:6px 10px;
  margin-bottom:8px;
  font-size:13px;
}
.synCmpCol .ciLabel{
  font-size:13px;
}
.synCmpCol .ciValue{
  font-size:13px;
}
.synCmpCol .ciConj{
  font-size:11px;
  padding:1px 5px;
}
.synCmpCol .ciAspList{
  margin:0; padding:0; list-style:none;
}
.synCmpCol .ciAspLine{
  font-size:12px;
  gap:5px;
}

/* Badge et bannière CI comparaison */
.ciCompareBanner{
  text-align:center;
  padding:8px 12px;
  margin-bottom:10px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
}
.ciCompareBadge{
  display:inline-block;
  margin-left:10px;
  padding:2px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  vertical-align:middle;
}

/* ═══════════════════════════════════════════════════════════
   CSS MIGRÉ DEPUIS synastrie.html — inline <style> supprimé
   ═══════════════════════════════════════════════════════════ */

/* ── Onglets Favoris / Récents / Dossier : masqués par défaut, affichés par JS ── */
#sideBox #tab-fav, #sideBox #tab-recent, #sideBox #tab-folder { display: none; }
html[data-theme-tab="fav"]    #sideBox #tab-fav    { display:block !important; }
html[data-theme-tab="recent"] #sideBox #tab-recent { display:block !important; }
html[data-theme-tab="folder"] #sideBox #tab-folder { display:block !important; }
html:not([data-theme-tab])    #sideBox #tab-fav    { display:block !important; }

/* ── Variables couleur rouge brique (identité page synastrie) ── */
:root{
  --syn-brick: #94361D;
  --syn-brick-light: #B4502F;
  --syn-grad: linear-gradient(135deg, #94361D, #C0553A);
  --syn-shadow: rgba(148, 54, 29, 0.35);
  --syn-shadow-hover: rgba(148, 54, 29, 0.45);
  --syn-border: rgba(148, 54, 29, 0.18);
}

/* ── Titre de page et bouton Calculer → rouge brique ── */
#formBox h1{ color: var(--syn-brick); }
#formBox form .btnCalc{
  background: var(--syn-grad);
  box-shadow: 0 10px 22px var(--syn-shadow);
}
#formBox form .btnCalc:hover{
  box-shadow: 0 14px 26px var(--syn-shadow-hover);
}

/* ── Bordure formulaire rouge brique ── */
#formBox{
  border: 1px solid var(--syn-border);
}

/* ── R1 couleur standard (bleu nuit) ── */
.ringFrame.ring1{ --ringColor: #172852; }

/* ── Toolbar roue : en bas, centrée ── */
.progWheelToolbar{
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 4px 0;
}
.progWheelToolbar .whlTool{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #94361D;
  border-color: rgba(148,54,29,0.18);
}
.progWheelToolbar .whlTool:hover{
  background: rgba(148,54,29,0.07);
  border-color: rgba(148,54,29,0.35);
}

/* La mise en page mobile des boutons Nettoyer / Reset / Calculer est
   maintenant écrite UNE SEULE FOIS dans theme.css (§ « 1 bis »), avec la
   même grille à deux colonnes que le thème natal. */

/* ══════════════════════════════════════════
   ANALYSE CI PROGRESSÉE — bouton + résultats
   ══════════════════════════════════════════ */

/* Ligne d'accueil du bouton « Analyse CI progressée », à la fin du
   séparateur : il se range à droite, séparé du contenu par un filet
   léger — même traitement que le bouton JSON des missions. */
.ciLifeRow{
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
/* Bouton "Analyse CI progressée" */
.ciLifeBtn{
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #96049C;
  background: #faf5fc;
  border: 1px solid #96049C;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background .15s, color .15s;
}
.ciLifeBtn:hover{ background: #96049C; color: #fff; }
.ciLifeBtn:disabled{ opacity: 0.5; cursor: wait; }

/* Conteneur des résultats vie entière CI */
#synCILife{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.ciLifeNone{
  font-size: 12px;
  color: #888;
  font-style: italic;
  padding: 6px 0;
}
/* Accordéon plage d'années CI */
.ciLifeRange{ margin-bottom: 6px; }
.ciLifeRange summary{
  font-size: 12px;
  font-weight: 800;
  color: #172852;
  padding: 5px 0 3px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ciLifeRange summary::-webkit-details-marker{ display: none; }
.ciLifeRange summary::before{
  content: "▸";
  font-size: 10px;
  color: #aaa;
  transition: transform .15s;
}
.ciLifeRange[open] summary::before{ transform: rotate(90deg); }
.ciLifeRange summary .ciLifeAspTitle{ font-weight: 700; }
.ciLifeRows{ padding: 2px 0 4px 16px; }
.ciLifeRow{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  padding: 1px 0;
  line-height: 1.5;
}
.ciLifeYear{ font-weight: 700; color: #555; min-width: 34px; flex-shrink: 0; }
.ciLifeOrb{ color: #888; font-size: 10.5px; }
.ciLifeAsp{ font-weight: 600; font-size: 11px; }

/* ══════════════════════════════════════════
   GRANDS TRIGONES — cartes et diagrammes
   ══════════════════════════════════════════ */

/* Badge compteur (ex : "3") */
.gtCountBadge{
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #888;
  vertical-align: middle;
}
/* Carte d'un trigone */
/* ── Styles GT supprimés : gtCard, gtCardHeader, gtCardTitle, gtBody,
   gtDiagram sont remplacés par figureCard / figCardHeader / figCardContent / figCardSvg / figureBody ── */
.gtElemBadge{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.gtSigBadge{
  font-size: 9px;
  color: #999;
  font-family: monospace;
  letter-spacing: 0.04em;
}
/* gtSideRow, gtSideChan, etc. encore utilisés par le popup T-Carré */
.gtSideRow{ display: flex; align-items: baseline; gap: 5px; padding: 1px 0; }
.gtSideChan{
  font-size: 9px; font-weight: 700; color: #888;
  min-width: 24px; text-transform: uppercase;
}
.gtSideObjs{ font-weight: 600; font-size: 10.5px; }
.gtSideOrb{ color: #888; font-size: 10px; }

/* ── Popup zoom GT (agrandissement du diagramme) ── */
.gtPopOverlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 950;
  justify-content: center;
  align-items: center;
}
.gtPopOverlay.open{ display: flex; }
.gtPopCard{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  padding: 20px 24px;
  max-width: 420px;
  width: 90vw;
  position: relative;
  text-align: center;
}
.gtPopClose{
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; font-size: 20px;
  cursor: pointer; color: #888; line-height: 1;
}
.gtPopClose:hover{ color: #333; }
.gtPopTitle{ font-size: 13px; font-weight: 800; color: #172852; margin-bottom: 8px; }
.gtPopSvg svg{ width: 100%; max-width: 360px; height: auto; }
.gtPopSides{ margin-top: 10px; font-size: 12px; text-align: left; }

/* ── Aucun résultat GT ── */
.gtNone{ font-size: 12px; color: #888; font-style: italic; padding: 6px 0; }

/* ── Section par élément ── */
.gtElemSection{ margin-bottom: 10px; }
.gtElemHeader{
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 4px 10px; border-left: 4px solid #888; margin-bottom: 6px;
}
.gtElemCount{ font-size: 11px; color: #888; font-weight: 600; }

/* ── Conteneur des cartes d'une famille (empilées verticalement comme les autres figures) ── */
.gtFamContent{ display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px 0; }

/* ── Accordéon famille (groupe de trigones partageant le même sommet variable) ── */
.gtFamAcc{ margin-bottom: 4px; }
.gtFamSum{
  font-size: 12px; font-weight: 700; color: #172852;
  padding: 4px 0 3px 0; border-bottom: 1px solid #eee;
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px;
}
.gtFamSum::-webkit-details-marker{ display: none; }
.gtFamSum::before{ content: "▸"; font-size: 10px; color: #aaa; transition: transform .15s; }
.gtFamAcc[open] > .gtFamSum::before{ transform: rotate(90deg); }
.gtFamLabel{ font-weight: 800; }
.gtFamMeta{ font-size: 11px; font-weight: 500; color: #888; }
/* Note sous-groupe */
.gtSubgroupNote{ font-size: 10.5px; color: #aaa; font-style: italic; padding: 4px 0 0 14px; }

/* ── Score trigone (badge avec tooltip) ── */
.gtScore{
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 700; color: #1a3a7a;
  background: #eef0f8; border-radius: 8px; padding: 1px 7px;
  margin-left: auto; white-space: nowrap; position: relative; cursor: help;
}
.gtScore::after{
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); right: 0; left: auto; transform: none;
  background: #1a1a2e; color: #e8e8f5; font-size: 10px; font-weight: 400;
  line-height: 1.6; white-space: pre; padding: 8px 12px; border-radius: 8px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  z-index: 999; min-width: 260px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.gtScore::before{
  content: ""; position: absolute; bottom: calc(100% + 2px); right: 12px; left: auto;
  transform: none; border: 5px solid transparent; border-top-color: #1a1a2e;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 999;
}
.gtScore:hover::after, .gtScore:hover::before{ opacity: 1; }
.gtScoreVal{ font-size: 12px; font-weight: 800; }
/* Badge "principal" — premier trigone de la famille */
.gtPrincipalBadge{
  font-size: 8px; font-weight: 800; color: #fff; background: #1a3a7a;
  border-radius: 6px; padding: 1px 6px; letter-spacing: 0.05em;
  text-transform: uppercase; vertical-align: middle;
}
/* Badge "AABB" sommet mixte fusionné */
.gtMixedBadge{
  font-size: 8px; font-weight: 800; color: #fff; background: #7B3F9E;
  border-radius: 6px; padding: 1px 6px; letter-spacing: 0.03em; vertical-align: middle;
}

/* ══════════════════════════════════════════
   ÉTOILE DE DAVID — cartes et scores
   ══════════════════════════════════════════ */

/* Le .sumSpacer pousse les boutons à droite avant la flèche */
.figSum .sumSpacer{ flex: 1 1 auto; }

/* Carte Étoile de David */
.starCard{
  border: 1px solid #e5e5ee;
  border-radius: 10px;
  padding: 12px 16px;
  background: rgba(247,246,242,0.55); /* beige standard */
  margin-bottom: 10px;
}
.starCardHeader{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; flex-wrap: wrap;
}
/* Score badge avec tooltip */
.starScore{
  display: inline-flex; align-items: baseline; gap: 2px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#6C3FA0,#E07020);
  border-radius: 10px; padding: 2px 10px;
  position: relative; cursor: help;
}
.starScore::after{
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e; color: #e8e8f5; font-size: 10px; font-weight: 400;
  line-height: 1.6; white-space: pre; padding: 8px 12px; border-radius: 8px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  z-index: 999; min-width: 220px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.starScore::before{
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a2e;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 999;
}
.starScore:hover::after, .starScore:hover::before{ opacity: 1; }
.starScoreNum{ font-size: 14px; }
.starElemPair{ font-size: 11px; font-weight: 600; color: #555; }
.starSextileCount{ font-size: 10px; color: #888; font-weight: 700; margin-left: auto; }
.starBody{ font-size: 11px; line-height: 1.8; color: #333; }
/* Pastilles sous-scores */
.starSubScores{
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; font-size: 10px;
}
.starSub{
  background: #f0f0f8; border-radius: 6px; padding: 1px 8px;
  color: #555; font-weight: 600; position: relative; cursor: help;
}
.starSub[data-tip]::after{
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e; color: #e8e8f5; font-size: 10px; font-weight: 400;
  line-height: 1.6; white-space: pre-wrap; padding: 7px 11px; border-radius: 8px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  z-index: 1000; min-width: 200px; max-width: 420px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.starSub[data-tip]::before{
  content: ""; position: absolute; bottom: calc(100% + 1px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a2e;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1000;
}
.starSub[data-tip]:hover::after, .starSub[data-tip]:hover::before{ opacity: 1; }
/* Liste des sextiles formant l'étoile */
.starSextileList{
  margin-top: 6px; padding: 6px 10px;
  background: #f8f8fc; border-radius: 6px;
  border-left: 3px solid #ccc; font-size: 10px; color: #666;
}
.starNone{ font-size: 12px; color: #888; font-style: italic; padding: 6px 0; }

/* ══════════════════════════════════════════
   ÉNNÉADES — cartes et scores
   ══════════════════════════════════════════ */

/* Carte Énnéade (même look que starCard) */
.ennCard{
  border: 1px solid #e5e5ee;
  border-radius: 10px;
  padding: 12px 16px;
  background: rgba(247,246,242,0.55); /* beige standard */
  margin-bottom: 10px;
}
.ennCardHeader{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
/* Score badge énnéade — gradient violet/bleu */
.ennScore{
  display: inline-flex; align-items: baseline; gap: 2px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#2D4A8A,#6C3FA0);
  border-radius: 10px; padding: 2px 10px;
  position: relative; cursor: help;
}
.ennScore::after{
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e; color: #e8e8f5; font-size: 10px; font-weight: 400;
  line-height: 1.6; white-space: pre; padding: 8px 12px; border-radius: 8px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  z-index: 999; min-width: 230px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.ennScore::before{
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a2e;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 999;
}
.ennScore:hover::after, .ennScore:hover::before{ opacity: 1; }
.ennScoreNum{ font-size: 14px; }
.ennElemTriple{ font-size: 11px; font-weight: 600; color: #555; }
.ennPontCount{ font-size: 10px; color: #888; font-weight: 700; margin-left: auto; }
.ennSubScores{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; font-size: 10px; }
/* Pastilles sous-scores énnéade — réutilise .starSub */
.ennBody{ font-size: 11px; line-height: 1.8; color: #333; }
/* Liste des ponts de l'énnéade */
.ennPontList{
  margin-top: 6px; padding: 6px 10px;
  background: #f8f8fc; border-radius: 6px;
  border-left: 3px solid #8C6FB0; font-size: 10px; color: #666;
}
.ennNone{ font-size: 12px; color: #888; font-style: italic; padding: 6px 0; }
/* ── Boutons filtre par élément (énnéade) ── */
.ennFilterBar{ display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px 0; }
.ennFilterBtn{
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  border: 1px solid #c5b8e8; background: #f5f0fb; color: #4a3070;
  cursor: pointer; transition: background .15s;
}
.ennFilterBtn.active{
  background: linear-gradient(135deg,#2D4A8A,#6C3FA0);
  color: #fff; border-color: transparent;
}
.ennFilterBtn:hover:not(.active){ background: #ede8f8; }

/* ══════════════════════════════════════════
   BOUTON "NOTER LE VÉCU" + POPUP VÉCU
   ══════════════════════════════════════════ */

/* Bouton compact dans le summary d'une énnéade/étoile */
.vecuBtn{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; color: #4a3070;
  background: #ede8f8; border: 1px solid #c5b8e8;
  border-radius: 20px; padding: 3px 12px;
  cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s;
}
.vecuBtn:hover{ background: #d8ccf8; color: #2a1050; }
/* États colorés selon le vécu enregistré */
.vecuBtn[data-vecu="1"]{ background: #e8f0fe; color: #1a4080; border-color: #b0c8f8; }
.vecuBtn[data-vecu="2"]{ background: #e8f8ee; color: #1a5030; border-color: #90d8b0; }
.vecuBtn[data-vecu="-1"]{ background: #fdecea; color: #8a1a1a; border-color: #f0a0a0; }

/* Points vécu négatifs en rouge */
.vecuPts.neg{ color: #c04040; }

/* Popup vécu (positionnée dynamiquement par JS) */
.vecuPopup{
  position: fixed; z-index: 9999;
  background: #fff; border: 1px solid #ddd; border-radius: 12px;
  padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  min-width: 300px; max-width: 360px;
}
.vecuPopupTitle{ font-size: 13px; font-weight: 800; color: #1a1a2e; margin-bottom: 4px; }
.vecuPopupSub{ font-size: 10px; color: #888; margin-bottom: 12px; line-height: 1.4; }
.vecuOptions{ display: flex; flex-direction: column; gap: 6px; }
/* Chaque option de vécu */
.vecuPastille{
  display: grid;
  grid-template-columns: 24px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px; align-items: center;
  background: #f8f8fc; border: 2px solid transparent;
  border-radius: 10px; padding: 10px 12px;
  cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.vecuPastille:hover{ background: #f0eeff; border-color: #b8a8e8; }
.vecuPastille.selected{ border-color: #6C3FA0; background: #f0e8ff; }
.vecuIcon{ font-size: 18px; grid-row: 1 / 3; }
.vecuLabel{ font-size: 12px; font-weight: 700; color: #222; }
.vecuDesc{ font-size: 10px; color: #888; grid-column: 2; line-height: 1.4; }
.vecuPts{
  font-size: 13px; font-weight: 800; color: #6C3FA0;
  grid-row: 1 / 3; grid-column: 3;
}

/* ── Bouton ⓘ info (Étoile de David, GT) — même style que orbsInfoBtn ── */
.infoEtoileBtn{
  background: none; border: 1px solid rgba(23,40,82,0.15);
  border-radius: 50%; width: 20px; height: 20px; font-size: 12px;
  color: #1565c0; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s; padding: 0;
}
.infoEtoileBtn:hover{ background: rgba(21,101,192,0.08); }

/* ══════════════════════════════════════════
   DÉTECTION DE FIGURES ASTROLOGIQUES
   Carte englobante + sous-accordéons figAcc
   ══════════════════════════════════════════ */

/* Carte principale identique aux autres séparateurs (Positions, Aspects…) */
#synFigures{
  width: min(var(--pageW, 1100px), calc(100% - (var(--pagePad, 40px) * 2)));
  margin: 30px auto;
  background: #fff;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
  box-sizing: border-box;
  position: relative; /* ancre les popups vécu en position fixe */
}

/* L'accordéon parent occupe toute la carte (padding intérieur, pas de doublon) */
#synFigures > details.sectionAcc{
  margin: 0;
  background: none;
  padding: 28px;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* Mise en page et police de l'en-tête : bloc commun
   « EN-TÊTES DES SÉPARATEURS » dans theme.css. On ne garde ici que ce qui
   est propre à la page. */
#synFigures details.sectionAcc > summary.sectionSum{
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(23,40,82,0.08);
  margin-bottom: 4px;
}
#synFigures details.sectionAcc > summary.sectionSum::-webkit-details-marker{ display: none; }
#synFigures details.sectionAcc > .sectionBody{ padding-top: 8px; }

/* ── Sous-accordéons (figAcc) : Trigones, Étoiles de David, Énnéades ── */
/* Fond beige standard + bordure légère pour harmoniser avec les autres sections */
.figAcc{
  border-radius: 10px;
  border: 1px solid rgba(23,40,82,0.09);
  margin-bottom: 10px;
  overflow: hidden;
  background: rgba(247,246,242,0.55); /* beige harmonisé avec les autres accordéons */
}
/* Titre du sous-accordéon */
.figSum{
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 8px; cursor: pointer; user-select: none; list-style: none;
  padding: 10px 14px;
  font-size: 14px; font-weight: 700; color: #172852;
}
.figSum::-webkit-details-marker{ display: none; }
/* Flèche droite */
.figSum::after{
  content: "›";
  font-size: 15px; font-weight: 700; color: #bbb;
  margin-left: auto; flex-shrink: 0;
  transition: transform .2s ease; display: inline-block;
}
.figAcc[open] > .figSum::after{ transform: rotate(90deg); }
/* Corps du sous-accordéon */
.figBody{ padding: 4px 14px 12px 14px; }
/* ══════════════════════════════════════════
   ACCORDÉONS ASPECTS — ombre/bordure + bouton ℹ orbes
   ══════════════════════════════════════════ */

/* Accordéon d'aspects : même look que les positions */
.aspAccordion{
  border: var(--cardBorder, 1px solid rgba(23,40,82,0.12));
  border-radius: var(--cardRadius, 16px);
  box-shadow: var(--cardShadow, 0 8px 22px rgba(0,0,0,0.08));
  margin-bottom: 12px;
}
.aspAccordion[open]{ border-color: rgba(23,40,82,0.18); }
.aspAccordion.aspActive{
  border-color: rgba(23,40,82,0.30);
  box-shadow: 0 4px 16px rgba(23,40,82,0.12);
}

/* ── Bouton ℹ info orbes ── */
.orbsInfoBtn{
  background: none;
  border: 1px solid rgba(23,40,82,0.15);
  border-radius: 50%;
  width: 20px; height: 20px; font-size: 12px;
  color: #1565c0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 6px; transition: background .12s;
}
.orbsInfoBtn:hover{ background: rgba(21,101,192,0.08); }

/* ── Popup info orbes (overlay + carte blanche) ── */
.orbsInfoOverlay{
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.orbsInfoPopup{
  background: #fff; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  max-width: 520px; width: 90vw; padding: 24px 28px;
  max-height: 80vh; overflow-y: auto;
}
.orbsInfoPopup h3{ margin: 0 0 12px 0; font-size: 16px; color: #172852; }
.orbsInfoPopup h4{ margin: 14px 0 6px 0; font-size: 13px; color: #172852; font-weight: 800; }
.orbsInfoPopup p{ margin: 0 0 8px 0; font-size: 12.5px; line-height: 1.6; color: #333; }
.orbsInfoPopup code{
  background: rgba(23,40,82,0.06); padding: 2px 6px;
  border-radius: 4px; font-size: 12px; font-weight: 700; color: #172852;
}
.orbsInfoClose{
  float: right; background: none; border: none;
  font-size: 18px; cursor: pointer; color: #888; padding: 0 4px;
}
.orbsInfoClose:hover{ color: #333; }
.orbsInfoExample{
  background: rgba(23,40,82,0.04); border-radius: 8px;
  padding: 10px 14px; margin: 8px 0; font-size: 12px; line-height: 1.6; color: #555;
}

/* ══════════════════════════════════════════
   CONTRÔLE TEMPOREL — slider date maître
   Pilote la date de tous les anneaux dynamiques.
   ══════════════════════════════════════════ */

/* Conteneur général */
#timeControl{ padding: 4px 0 0 0; }

/* Date affichée — grosse, centrée */
.tcDateRow{ text-align: center; padding: 2px 0 6px 0; }
.tcDateDisplay{ font-size: 15px; font-weight: 700; color: #172852; letter-spacing: 0.02em; }

/* Ligne slider + boutons navigation ← → */
.tcSliderRow{ display: flex; align-items: center; gap: 6px; padding: 0 0 8px 0; }

/* ===== FAVORIS TEMPORELS (synastrie) ===== */
.tcFavNavRow{ margin: 6px 0 4px; }
.tcFavNavBtn{
  width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #172852; border-radius: 6px;
  padding: 6px 10px; font-size: 11px; font-weight: 700; color: #172852;
  cursor: pointer; transition: background .12s, color .12s;
}
.tcFavNavBtn:hover{ background: rgba(23,40,82,0.06); }
.tcFavNavBtn.active{ background: #172852; color: #fff; border-color: #172852; }
.tcRingFavBtn{ margin-top: 6px; }
.favDlgOverlay{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(23,40,82,0.35);
  display: flex; align-items: center; justify-content: center;
}
.favDlg{
  background: #fff; border-radius: 12px; padding: 20px 22px;
  width: min(420px, 92vw); box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.favDlgTitle{ font-size: 15px; font-weight: 800; color: #172852; margin-bottom: 12px; }
.favDlgBtns{ display: flex; gap: 10px; justify-content: flex-end; }
.favDlgCancel{
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer;
  background: #f0f0f0; color: #555; border: 1px solid #ddd;
}
.favDlgCancel:hover{ background: #e6e6e6; }
.favMgrDlg{ width: min(420px, 92vw); }
.favMgrList{ max-height: 50vh; overflow-y: auto; margin-bottom: 14px; }
.favMgrEmpty{ color: #888; font-size: 13px; text-align: center; padding: 16px 0; }
.favMgrNote{ font-size: 11px; color: #8a6d1f; background: #fdf6e3; border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.favMgrRow{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 6px;
}
.favMgrRow:hover{ background: #faf8f4; }
.favMgrInfo{ display: flex; flex-direction: column; cursor: pointer; flex: 1; }
.favMgrLabel{ font-weight: 700; color: #172852; font-size: 13px; }
.favMgrMeta{ font-size: 11px; color: #777; margin-top: 2px; }
.favMgrDel{
  background: none; border: none; color: #b5253a; font-size: 14px; font-weight: 700;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.favMgrDel:hover{ background: #fbe9ec; }
.tcNavBtn{
  background: none; border: 1px solid rgba(23,40,82,0.15); border-radius: 6px;
  width: 28px; height: 28px; font-size: 12px; color: #172852;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s;
}
.tcNavBtn:hover{ background: rgba(23,40,82,0.06); }
.tcNavBtn:active{ background: rgba(23,40,82,0.12); }

/* Slider custom (style navigateur) */
.tcSlider{
  flex: 1; height: 6px;
  -webkit-appearance: none; appearance: none;
  background: rgba(23,40,82,0.10); border-radius: 3px; outline: none; cursor: pointer;
}
.tcSlider::-webkit-slider-thumb{
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #172852; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: grab;
}
.tcSlider::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 50%;
  background: #172852; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: grab;
}
.tcSlider:active::-webkit-slider-thumb{ cursor: grabbing; }
.tcSlider:active::-moz-range-thumb{ cursor: grabbing; }

/* Lignes Pas / Plage (boutons de réglage) */
.tcRow{ display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.tcLabel{ font-size: 11px; font-weight: 600; color: #555; white-space: nowrap; min-width: 38px; }
.tcBtnGroup{ display: flex; flex-wrap: wrap; gap: 4px; }
.tcBtn{
  background: rgba(23,40,82,0.05); border: 1px solid rgba(23,40,82,0.12);
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  color: #172852; cursor: pointer; transition: background .12s, border-color .12s;
  line-height: 1.4;
}
.tcBtn:hover{ background: rgba(23,40,82,0.10); }
.tcBtn.active{ background: #172852; color: #fff; border-color: #172852; }

/* Inputs date/heure : compacts, alignés avec les boutons */
.tcRow input[type="date"],
.tcRow input[type="time"]{
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  line-height: 1.3;
  height: 28px;
  max-width: 140px;
  box-sizing: border-box;
}
/* Champs date et heure normalisés */
.tcInput{
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  height: 28px;
  width: 130px;
  box-sizing: border-box;
}
/* Boutons OK : strictement même hauteur que le champ */
.tcOK{
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  position: relative;
  top: 2px;
}

/* ── Grille Date + Heure alignée (transit) ── */
.tcDateTimeGrid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 6px;
  align-items: stretch;
  padding: 3px 0;
}
.tcDTRow{
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Bouton Initiale : prend toute la hauteur des 2 lignes */
.tcInitBtn{
  grid-column: 2;
  grid-row: 1 / 3;
  background: none;
  border: 1px solid rgba(23,40,82,0.15);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background .12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}
.tcInitBtn:hover{ background: rgba(23,40,82,0.06); }

/* Séparation entre la zone date/heure et les pas */
.tcRow[data-tc-sep]{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(23,40,82,0.10);
}

/* Bouton Recentrer */
.tcCenterRow{ justify-content: center; padding: 6px 0 2px 0; }
.tcCenterBtn{
  background: none; border: 1px solid rgba(23,40,82,0.15);
  border-radius: 6px; padding: 3px 12px; font-size: 11px;
  font-weight: 600; color: #555; cursor: pointer; transition: background .12s;
}
.tcCenterBtn:hover{ background: rgba(23,40,82,0.06); }

/* Indicateurs par anneau (dates affichées sous le slider) */
.tcRingInfo{ padding: 6px 0 0 0; border-top: 1px solid rgba(23,40,82,0.08); margin-top: 4px; }
.tcRingLine{
  display: flex; align-items: center; gap: 6px; padding: 2px 0;
  font-size: 11px; color: #333;
}
.tcRingDot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tcRingLabel{ font-weight: 600; }
.tcRingDate{ color: #555; }
.tcRingTag{
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(23,40,82,0.08); color: #172852; border-radius: 4px; padding: 1px 5px;
}

/* ══════════════════════════════════════════
   CARTES FIGURES CLASSIQUES (T-Carré, Yod, etc.)
   ══════════════════════════════════════════ */

/* Carte individuelle d'une figure */
.figureCard{
  border: 1px solid #e5e5ee;
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(247,246,242,0.55);
  margin-bottom: 10px;
}
/* Titre de la carte (nom de la figure) */
.figCardTitle{
  font-size: 13px;
  font-weight: 800;
  color: #172852;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* Corps de la carte */
.figureBody{
  font-size: 11.5px;
  line-height: 1.7;
  color: #333;
}
/* Badge élément(s) dans le titre */
.figElemBadges{
  font-size: 11px;
  font-weight: 600;
}
/* Ligne d'orbes */
.figOrbRow{
  font-size: 10px;
  color: #aaa;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Message "aucune figure" */
.figNone{
  font-size: 12px;
  color: #888;
  font-style: italic;
  padding: 6px 0;
}

/* ══════════════════════════════════════
   CARTES FIGURES CLASSIQUES v2 — layout SVG + texte côte à côte
   ══════════════════════════════════════ */

/* Carte conteneur */
.figureCard{
  border: 1px solid #e5e5ee;
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(247,246,242,0.55);
  margin-bottom: 10px;
}
/* Ligne d'en-tête : icône + titre + badge A↔B */
.figCardHeader{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.figCardIcon{
  font-size: 15px;
  line-height: 1;
}
.figCardTitle{
  font-size: 13px;
  font-weight: 800;
  color: #172852;
  flex: 1;
}
/* Badge inter-thèmes rouge brique */
.figInterBadge{
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #94361D;
  border-radius: 5px;
  padding: 1px 6px;
}
/* Badge intra orange/violet */
.figIntraBadge{
  font-size: 9px;
  font-weight: 700;
  color: #888;
  background: #eee;
  border-radius: 5px;
  padding: 1px 6px;
}
/* Layout SVG à gauche, texte à droite */
.figCardContent{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.figCardSvg{
  flex-shrink: 0;
}
.figCardSvg svg{
  display: block;
  border-radius: 8px;
}
/* Corps texte */
.figureBody{
  font-size: 11.5px;
  line-height: 1.7;
  color: #333;
  flex: 1;
  min-width: 0;
}
/* Ligne d'orbes */
.figOrbRow{
  font-size: 10px;
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Message vide */
.figNone{
  font-size: 12px;
  color: #888;
  font-style: italic;
  padding: 6px 0;
}
/* Diagramme T-Carré cliquable (popup zoom) */
/* Diagramme T-Carré cliquable (popup zoom) */
.tcarreDiagram{ flex: 0 0 auto; cursor: pointer; }
.tcarreDiagram:hover{ opacity: 0.8; }
/* Diagramme universel cliquable (popup zoom — toutes les figures) */
.figDiagram{ flex: 0 0 auto; cursor: pointer; }
.figDiagram:hover{ opacity: 0.8; }

/* Popup figure élargi : SVG prend toute la place */
.gtPopCard.figPopWide{ max-width: 520px; }
.gtPopCard.figPopWide .gtPopSvg svg{ max-width: 100%; width: 100%; }

/* Bouton Focus figure */
.figFocusBtn{
  font-size: 9px;
  font-weight: 700;
  color: #888;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1px 7px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s;
}
.figFocusBtn:hover{
  background: #e8e6f0;
  color: #6C3FA0;
  border-color: #ccc;
}
.figFocusBtn.active{
  background: #6C3FA0;
  color: #fff;
  border-color: #6C3FA0;
}

/* Toggle Classique / Classique+ dans le titre des figures */
.figFilterToggle{
  display: inline-flex;
  margin-left: 12px;
  border: 1px solid #d0cfe0;
  border-radius: 6px;
  overflow: hidden;
  vertical-align: middle;
}
.figFilterBtn{
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border: none;
  cursor: pointer;
  background: #f5f4f0;
  color: #999;
  transition: all 0.15s;
}
.figFilterBtn:first-child{ border-right: 1px solid #d0cfe0; }
.figFilterBtn:hover{ background: #ece9f5; color: #6C3FA0; }
.figFilterBtn.active{
  background: #6C3FA0;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   LÉGENDE MAÎTRES — Synastrie (copié de theme.css)
   2 colonnes, carrés de couleur, responsive
   ═══════════════════════════════════════════════════════════ */

#synMaitreLegend{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  user-select: none;
}

@media (max-width: 520px){
  #synMaitreLegend{ grid-template-columns: 1fr; }
}

#synMaitreLegend .lgRow{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  margin: 0;
  background: transparent;
  border: 0;
}

#synMaitreLegend .lgSwatch{
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 14px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.10);
}

#synMaitreLegend .lgRow:nth-child(1) .lgSwatch{ background:#2ECC71; }
#synMaitreLegend .lgRow:nth-child(2) .lgSwatch{ background:#2D7CFF; }
#synMaitreLegend .lgRow:nth-child(3) .lgSwatch{ background:#E0503B; }
#synMaitreLegend .lgRow:nth-child(4) .lgSwatch{ background:#F39C12; }
#synMaitreLegend .lgRow:nth-child(5) .lgSwatch{ background:#8E44AD; }
#synMaitreLegend .lgRow:nth-child(6) .lgSwatch{ background:#9AA0A6; }

#synMaitreLegend .lgTxt{
  font-size: 13px;
  opacity: .9;
}

/* ═══════════════════════════════════════════════════════════
   ENCADRÉ RÉSUMÉ — Synastrie (6 pastilles, style natal)
   ═══════════════════════════════════════════════════════════ */

.synSummaryBox{
  margin-bottom: 14px;
  padding: 12px 10px;
  background: #fff;
  border: 2px solid #94361D;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.synSummaryTitle{
  margin: 0 0 10px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #333;
  font-weight: 700;
}

/* Adapter la grille à la largeur des colonnes synastrie */
.synSummaryBox .summaryGrid{
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 8px;
}

.synSummaryBox .summaryItem{
  padding: 8px 6px;
}

.synSummaryBox .summaryLabel{
  font-size: 9px;
}

.synSummaryBox .summaryValue{
  font-size: 13px;
}

.synSummaryBox .badge{
  font-size: 11px;
  padding: 4px 8px;
  gap: 4px;
}

.synSummaryBox .badge .val{
  font-size: 12px;
}

/* Mobile : 2 colonnes au lieu de 3 */
@media (max-width: 520px){
  .synSummaryBox .summaryGrid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Couleur de la bordure selon la personne */
.synCmpCol[data-cmp-ring="1"] .synSummaryBox{ border-color: #172852; }
.synCmpCol[data-cmp-ring="2"] .synSummaryBox{ border-color: #3589b2; }

/* ═══════════════════════════════════════════════════════════
   MIROIR RELATIONNEL — Titre distinctif dans la section CI
   ═══════════════════════════════════════════════════════════ */

.ciMiroirTitle{
  color: #96049C;
  border-top: 2px solid rgba(150,4,156,0.2);
  padding-top: 10px;
  margin-top: 14px;
}