/* =========================================================
   TRANSIT — UI Astraema (stable)
   Basé sur progresse.css, adapté pour la page Transit.
   - Identité : Jaune doré Astraema (#D4A048)
   - Onglet 1 = Transit (date, heure, lieu)
   - Onglet 2 = Natal (optionnel, thème à charger)
   - Max 2 anneaux
   ========================================================= */

/* 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: text; -webkit-user-select: text;
  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: text; -webkit-user-select: text;
  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;

  /* « Tourner la roue au doigt » : on réserve les gestes HORIZONTAUX à la
     rotation du temps, et on laisse les gestes verticaux au navigateur
     pour qu'il fasse défiler la page normalement au-dessus de la roue.
     Sans cette ligne, le navigateur s'approprie le geste dès le premier
     pixel et la rotation ne démarre jamais sur téléphone. */
  touch-action: pan-y;
}

#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. */
#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 ─── */
.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: text; -webkit-user-select: text;
  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);
}
/* 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{
  cursor: pointer;
  user-select: text; -webkit-user-select: text;
  list-style: none;
}
#positions details.sectionAcc > summary.sectionSum::-webkit-details-marker,
#aspectsSeparator details.sectionAcc > summary.sectionSum::-webkit-details-marker{ display: none; }
#positions details.sectionAcc > .sectionBody,
#aspectsSeparator 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;
}

/* =========================
   Responsive mobile — formulaire transit
   ========================= */
@media (max-width: 760px){
  /* Grille formulaire : 1 colonne sur mobile */
  .progRow{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* La ligne de boutons Nettoyer / Reset / Calculer était empilée ici
     sur trois lignes, chaque bouton étiré sur toute la largeur — une
     allure que ni le natal ni les deux autres roues n'avaient. Elle est
     maintenant écrite UNE SEULE FOIS dans theme.css (§ « 1 bis »), avec
     la même grille à deux colonnes que le thème natal. */

  /* Sous-blocs : pas de débordement */
  .progSubBlock{
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Formulaire : contenir dans le viewport */
  #formBox{
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}