/* ✅ Met en bleu le bouton correspondant à l’onglet actif */
html[data-theme-tab="fav"] #sideBox .tabBtn[data-tab="fav"],
html[data-theme-tab="recent"] #sideBox .tabBtn[data-tab="recent"],
html[data-theme-tab="folder"] #sideBox .tabBtn[data-tab="folder"] {
  background: #172852;
  color: #fff;
  border-color: #172852;
}



/* ===============================
   Astraema — CSS “propre”
   Objectif : garder le rendu actuel en supprimant
   les overrides doublons et les règles contradictoires.
   =============================== */

/* --- Police Astraema --- */
@font-face{
  font-family: "Astraema";
  src: url("/static/fonts/Astraema.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* --- Variables globales (UNE SEULE FOIS) --- */
:root{
  /* Bouton principal */
  --ctaGrad: linear-gradient(135deg, #172852, #3589b2);
  --ctaShadow: rgba(122, 164, 255, 0.35);
  --ctaShadowHover: rgba(122, 164, 255, 0.40);

  /* Largeur page + cartes */
  --pageW: 1100px;
  --pagePad: 40px;

  --cardBorder: 1px solid #e1e4f0;
  --cardShadow: 0 8px 22px rgba(0,0,0,0.12);
  --cardRadius: 16px;

  /* Espacements */
  --gapW: 16px;

  /* Roue (comportement actuel : taille “fixe” + air + légère réduction) */
  --wheelAir: 26px;     /* air autour de la roue (dans la carte) */
  --wheelPx: 714px;
  --wheelScale: 0.95;  /* réduction légère de la roue */
  --wheelCol: calc(var(--wheelPx) + (var(--wheelAir) * 2) + 2px); /* colonne gauche */
}

/* --- Base --- */
body{
  font-family: system-ui, sans-serif;
  background: #fafafa;
  margin: 0;
  padding: 0;
}
nav a:hover{ color:#000; }

/* ===============================
   Blocs largeur “page”
   (formBox, modeBar, wheelArea, positions)
   =============================== */
#formBox,
#modeBar,
#wheelArea,
#positions{
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2)));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ===============================
   FORMULAIRE
   =============================== */
#formBox{
  margin: 40px auto 20px auto;
  background: #fff;
  padding: 28px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
}

/* Layout : formulaire (gauche) + historique (droite) */
#formBox .topGrid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: start;
}

/* Sidebar historique */
#sideBox{
  border-left: 1px solid #e5e5ee;
  padding-left: 18px;
}
#sideBox h2{
  margin: 0 0 12px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #333;
}
.sideTabs{
  display:flex;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.tabBtn{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  background:#fff;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  cursor:pointer;
  color:#333;
}
.tabBtn.active{
  background:#172852;
  color:#fff;
  border-color:#172852;
}
.tabBtn[disabled]{ opacity:0.45; cursor:not-allowed; }
.sideList{
  list-style:none;
  padding:0;
  margin:0;
  font-size:13px;
  color:#333;
  /* Hauteur calibrée pour ~6 items visibles, puis scroll.
     Un item theme = ~57px (10+10 padding + 2 lignes nom+meta + bordure).
     6 × 57 ≈ 340 → on prend 350 pour un peu de marge.
     Pour les pages composite (items à 1 ligne), c'est .sideListScroll qui
     définit sa propre hauteur dans le CSS de chaque page. */
  max-height: 350px;
  overflow-y: auto;
  padding-right: 4px;
}
/* Scrollbar discrète (WebKit / Firefox) */
.sideList::-webkit-scrollbar{ width:6px; }
.sideList::-webkit-scrollbar-thumb{
  background:#d6d9ea;
  border-radius:3px;
}
.sideList::-webkit-scrollbar-thumb:hover{ background:#b9c0d8; }
.sideList{ scrollbar-width:thin; scrollbar-color:#d6d9ea transparent; }

/* ─── Bouton Dossier ▼ et son menu déroulant (Étape sidebar+dossiers) ─── */
.sideTabs .folderTabWrap{
  position:relative;
}
.tabBtn.folderTab{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.tabBtn.folderTab .caret{
  font-size:9px;
  opacity:0.7;
}
/* Quand l'onglet Dossier est actif (bouton bleu),
   on rend la flèche plus visible (sinon elle paraît bleu pâle) */
html[data-theme-tab="folder"] #sideBox .tabBtn.folderTab .caret{
  opacity: 0.85;
}
/* Menu déroulant des dossiers (caché par défaut) */
.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;
}
.sideList li{
  padding:10px 0;
  border-bottom:1px solid #e5e5ee;
}
.sideList li:last-child{ border-bottom:none; }
.sideNote{
  font-size:13px;
  color:#666;
  line-height:1.4;
}
.sideNote a{
  color:#172852;
  text-decoration:none;
  font-weight:600;
}
.sideNote a:hover{ text-decoration:underline; }
/* --- Historique : items (Favoris / Récents) --- */
#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. */

#sideBox .sideCtaRow{
  padding-top:12px;
  border-bottom:none;
}

#sideBox .sideCta{
  display:inline-block;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#172852;
  font-weight:700;
}

/* Titre */
#formBox h1{
  margin-top:0;
  font-size:22px;
  text-transform: uppercase;
  letter-spacing:0.06em;
  font-weight:600;
}

/* Grille du form */
form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 20px;
  margin-top:18px;
}
form .full{ grid-column: 1 / -1; }

label{
  font-size:13px;
  text-transform: uppercase;
  letter-spacing:0.07em;
  color:#555;
}
input{
  margin-top:4px;
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
  background:#fafafa;
  color:#333;
  font-size:14px;
  box-sizing: border-box;
}

/* ✅ Alignement Date / Heure + “Inconnue” */
#formBox form .dtField{
  display:flex;
  flex-direction:column;
}
#formBox form .dtField .labelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:18px;
  margin:0 0 4px 0;
}
#formBox form .dtField .labelRow > label{ margin:0; }

#formBox form .unknownToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:13px;
  text-transform:none;
  letter-spacing:0;
  color:#555;
}
#formBox form .unknownToggle input[type="checkbox"]{
  width:auto;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
}
#formBox input[type="date"],
#formBox input[type="time"]{
  min-height:44px;
  margin-top:0;
}

/* ===============================
   BOUTONS DU FORMULAIRE (sans casser header)
   =============================== */
#formBox form .formActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#formBox form .actionsLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  order: 1;
}
#formBox form .btn{
  padding:12px 18px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:13px;
  text-transform: uppercase;
  letter-spacing:0.12em;
  cursor:pointer;
  font-weight:700;
  background:#fff;
  color:#333;
}
#formBox form .btn:active{ transform: translateY(1px); }

/* Nettoyer */
#formBox form .btnClear{
  border-color:#e1e4f0;
  background:#fff;
}
#formBox form .btnClear:hover{ background:#f3f5fb; }

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

/* Calculer */
#formBox form .btnCalc{
  margin-left:auto;
  /* Un contour INVISIBLE, et non `border:none`.
     Avec `none`, Calculer perdait les 1 px de contour que portent
     Nettoyer et Enregistrer : il faisait 39 px de haut contre 41, et
     paraissait plus petit et plus mince que son voisin. Un contour
     transparent de la même épaisseur lui rend exactement la même
     taille, sans rien changer à son aspect. */
  border: 1px solid transparent;
  color:#fff;
  background: var(--ctaGrad);
  box-shadow: 0 10px 22px var(--ctaShadow);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  order: 2;
}
#formBox form .btnCalc:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px var(--ctaShadowHover);
  filter: brightness(1.02);
}
.paramSectionTitle{
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #333;
}
.orbsActionsRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
}

.orbsLeftCol{
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* Espacement entre sections Paramètres (main) */
#modePanel [data-submenu="params"] .paramSection + .paramSection{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e5ee; /* optionnel mais très lisible */
}

/* ===============================
   RÉSUMÉ
   =============================== */
#summaryBox{
  margin-top:14px;
  padding:14px 16px;
  background:#fff;
  border: 2px solid #94361D;
  border-radius:14px;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.8) inset;
}
#summaryBox h3{
  margin:0 0 10px 0;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  color:#333;
}
.summaryGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px 14px;
}
.summaryItem{
  background: rgba(247,246,242,0.70);
  border:1px solid rgba(23,40,82,0.10);
  border-radius:12px;
  padding:10px 12px;
  text-align:center;
}
.summaryLabel{
  font-size:11px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  color:#666;
  margin-bottom:4px;
}
.summaryValue{
  font-size:15px;
  font-weight:700;
  color:#172852;
}
.summaryValueStack{
  margin-top:2px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}

/* Badges dominantes */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(23,40,82,0.12);
  color:inherit;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.02em;
}
.badge .val{ font-size:15px; font-weight:600; opacity:0.9; }

/* Couleurs badges */
.b-feu   { color:#D4A048; border-color:rgba(212,160,72,0.35); }
.b-terre { color:#94361D; border-color:rgba(148,54,29,0.35); }
.b-air   { color:#4B94C5; border-color:rgba(75,148,197,0.35); }
.b-eau   { color:#204D89; border-color:rgba(32,77,137,0.35); }
.b-yang  { color:#A65440; border-color:rgba(166,84,64,0.35); }
.b-yin   { color:#204D89; border-color:rgba(32,77,137,0.35); }
.b-card  { color:#F3D987; border-color:rgba(243,217,135,0.45); }
.b-fixe  { color:#B23A2A; border-color:rgba(178,58,42,0.35); }
.b-mut   { color:#2E7BBF; border-color:rgba(46,123,191,0.35); }

/* ===============================
   BARRE MODES (Analyse/Maîtrise)
   =============================== */
#modeBar{
  margin: 10px auto 0 auto;
  background:#fff;
  border: var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  padding: 12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.modeLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.modeTitle{
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  font-weight:800;
  color:#333;
  margin-right:2px;
}
.modeBtn, .viewBtn{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  background:#fff;
  font-size:12px;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:0.08em;
  cursor:pointer;
  color:#333;
}
.modeBtn.active{
  background:#172852;
  color:#fff;
  border-color:#172852;
}
.viewBtn.active{
  background:#94361D;
  color:#fff;
  border-color:#94361D;
}

/* ── Boutons verrouillés (plan free → fonctions pro) ── */
.modeLocked, .viewLocked{
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}
.modeLocked:hover, .viewLocked:hover{
  opacity: 0.6;
}
/* Un bouton locked ne peut jamais devenir actif visuellement */
.modeLocked.active, .viewLocked.active{
  background: #fff;
  color: #333;
  border-color: #e1e4f0;
  opacity: 0.5;
}

/* ── Panneau complet grisé quand mode locked (aperçu inactif) ── */
body[data-mode-locked="1"] #modePanel{
  position: relative;
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(0.3);
}
/* Bannière "Fonctionnalité Pro" au-dessus du panneau grisé */
body[data-mode-locked="1"] #modePanel::before{
  content: "🔒 Fonctionnalité Pro — Passez au plan Pro pour débloquer";
  display: block;
  pointer-events: auto;
  text-align: center;
  padding: 10px 16px;
  margin: 0 0 10px 0;
  background: linear-gradient(135deg, #f8f0e3, #f3ebe0);
  border: 1px solid #d4b88c;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #9a7640;
  letter-spacing: 0.04em;
  opacity: 1;
  filter: none;
}

/* ── Accordéons verrouillés (Dominantes, etc.) ── */
/* Le JS empêche l'ouverture, le CSS donne le feedback visuel */
details[data-locked="1"] > summary{
  cursor: default;
  opacity: 0.75;
}
/* Cacher la flèche d'ouverture pour montrer que c'est non-ouvrable */
details[data-locked="1"] > summary::marker,
details[data-locked="1"] > summary::-webkit-details-marker{
  display: none;
}
/* Cadenas Pro accolé au titre (la flèche ▾ n'existe plus) */
details[data-locked="1"] .domTitle::after{
  content: " 🔒";
  font-size: 0.65em;
  opacity: 0.6;
}
/* Tag 🔒 Pro à côté du titre */
.domLockTag{
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9a7640;
  margin-left: 8px;
  vertical-align: middle;
}

/* Message verrouillé dans une section (Positions, etc.) */
.lockedOverlay{
  text-align: center;
  padding: 20px 16px;
  margin: 10px 0;
  background: linear-gradient(135deg, #f8f0e3, #f3ebe0);
  border: 1px solid #d4b88c;
  border-radius: 10px;
}

/* Panneau Paramètres Pro verrouillé */
.paramTopPanel[data-locked="1"] .paramProWrap{
  pointer-events: none;
  opacity: 0.4;
  filter: grayscale(0.3);
}

/* ===============================
   ZONE ROUE + PANNEAU DROIT
   =============================== */
#wheelArea{
  margin: 10px auto 0 auto;
  display:grid;
  grid-template-columns: minmax(0, var(--wheelCol)) minmax(0, 1fr);
  gap: var(--gapW);
  align-items: stretch;
}

/* Carte roue */
#wheelCard{
  background:#fff;
  border: var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  padding: var(--wheelAir);
  width:100%;
  min-width:0;
  box-sizing:border-box;
  transition: opacity 220ms ease, transform 220ms ease;

}
#wheelCard #wheelBox{
  margin-top:0;
  padding-bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* SVG : largeur contrôlée + légère réduction (comme ton rendu actuel) */
#wheelBox svg,
#svg{
  width: min(100%, var(--wheelPx));
  max-width: var(--wheelPx);
  height:auto;
  display:block;
  aspect-ratio: 1 / 1;
}
#svg{
  transform: scale(var(--wheelScale));
  transform-origin: 50% 50%;
}

/* Colonne droite : menu (auto) + textbox (reste) */
#sidePanel{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
  min-height:0;
}

/* Menu : hauteur auto */
#modePanel{
  background:#fff;
  border: var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  padding: 12px 14px;
  flex: 0 0 auto;
}

/* Sous-menus : un seul visible (match ton HTML : div[data-submenu]) */
#modePanel [data-submenu] { display: none; }
html[data-mode="affichage"] #modePanel [data-submenu="affichage"],
body[data-mode="affichage"] #modePanel [data-submenu="affichage"] { display:block; }

html[data-mode="analyse"] #modePanel [data-submenu="analyse"],
body[data-mode="analyse"] #modePanel [data-submenu="analyse"] { display:block; }

html[data-mode="maitrises"] #modePanel [data-submenu="maitrises"],
body[data-mode="maitrises"] #modePanel [data-submenu="maitrises"] { display:block; }

html[data-mode="calcul_pro"] #modePanel [data-submenu="calcul_pro"],
body[data-mode="calcul_pro"] #modePanel [data-submenu="calcul_pro"] { display:block; }


html[data-mode="pro"] #modePanel [data-submenu="pro"],
body[data-mode="pro"] #modePanel [data-submenu="pro"] { display:block; }

html[data-mode="params"] #modePanel [data-submenu="params"],
body[data-mode="params"] #modePanel [data-submenu="params"] { display:block; }

/* fallback : avant JS, on montre Affichage */
html:not([data-mode]) #modePanel [data-submenu="affichage"],
body:not([data-mode]) #modePanel [data-submenu="affichage"] { display:block; }

#modePanel .subTitle{
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  font-weight:800;
  color:#333;
  margin-bottom:10px;
}

#modePanel .subBtns{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
/* ===============================
   PRO — UI (sans badges, sans CAPS)
   =============================== */

.proTabs{
  display:flex;
  gap:8px;
  margin: 6px 0 12px 0;
  flex-wrap:wrap;
}
.proTabBtn{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  background:#fff;
  font-size:12px;
  cursor:pointer;
  text-transform: uppercase;
  letter-spacing:0.08em;
  font-weight:450;
  color:#333;
}


.proTabBtn.active{
  background:#172852;
  color:#fff;
  border-color:#172852;
}
.proTabBtn[disabled]{
  opacity:0.45;
  cursor:not-allowed;
}

.proAcc{
  border:1px solid #e5e5ee;
  border-radius:14px;
  padding:10px 12px;
  margin-top:10px;
  background: rgba(247,246,242,0.55);
}
.proAccSum{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.proAccSum::-webkit-details-marker{ display:none; }
.proAccTitle{
  font-size:12px;
  font-weight:800;
  color:#333;
}

.proToggleRow{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin: 10px 0 8px 0;
}

/* group accordéons internes */
.proGroups{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  width:100%;
  box-sizing:border-box;
}
.proSubAcc{
  background:#fff;
  border:1px solid rgba(23,40,82,0.10);
  border-radius:14px;
  padding:10px;
  width:100%;
  box-sizing:border-box;
}
.proSubSum{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}
.proSubSum::-webkit-details-marker{ display:none; }

/* ══════════════════════════════════════════════════════════════
   FLÈCHE D'ACCORDÉON — un mini triangle
   Une section qui s'ouvre doit le dire. Sans repère, on ne devine pas
   qu'un titre est cliquable — c'est ce qui rendait ces panneaux peu
   intuitifs.
   Le repère doit se remarquer sans se voir : un tout petit triangle
   plein, 8 px de large sur 5 de haut, gris-bleu très pâle. Il est
   découpé en CSS dans un rectangle de couleur (clip-path) : aucun
   fichier image, aucune police d'icônes.
   EN HAUT DE LA LIGNE, PAS AU MILIEU : « align-self:flex-start » le
   décolle du texte et le pose en haut du séparateur, tout à droite,
   après la double flèche ⇵ — il ne bouscule donc rien.
   Il pointe vers le bas quand la section est fermée, vers le haut
   quand elle est ouverte.
   PAS SUR PETIT ÉCRAN : au doigt, on tape la ligne entière, le repère
   ne sert à rien et la place manque. 768 px est le point de bascule
   déjà utilisé partout ailleurs dans cette feuille.
   ══════════════════════════════════════════════════════════════ */
.proSubSum::after,
.proAccSum::after,
details.sectionAcc > summary.sectionSum::after,
details.domWrap > summary::after,
[data-submenu="affichage"] .affAccSum::after{
  content:"";
  flex:0 0 auto;
  align-self:flex-start;          /* en haut de la ligne, pas au milieu */
  width:8px; height:5px;
  box-sizing:content-box;
  background: rgba(23,40,82,.32);            /* gris-bleu très pâle */
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* pointe vers le bas */
  margin-top:2px;
  transition: transform 150ms ease;
}
details[open] > .proSubSum::after,
details[open] > .proAccSum::after,
details.sectionAcc[open] > summary.sectionSum::after,
details.domWrap[open] > summary::after,
[data-submenu="affichage"] details[open] > .affAccSum::after{
  transform: rotate(180deg);
}

/* ── Où la flèche se place ──
   Elle doit finir la ligne, à droite, collée à ce qui la précède — et
   toutes les flèches de la colonne alignées entre elles.
   Le piège corrigé le 4 septembre : .proSubSum répartit ses éléments avec
   « space-between ». En ajoutant la flèche, on passait de deux éléments à
   trois, et le petit carré se retrouvait planté au milieu de la ligne.
   Le titre absorbe donc l'espace restant : le carré et la flèche restent
   groupés à droite. */
.proSubSum > .proGroupTitleBtn{ margin-right:auto; }

/* L'écart entre la flèche et ce qui la précède.
   .proSubSum et .sectionSum ont déjà un « gap » entre leurs éléments : la
   flèche n'a besoin d'aucune marge, sinon l'écart compte double.
   .proAccSum, lui, n'a pas de gap : on lui en donne un. */
.proAccSum::after{ margin-left:8px; }

/* Le séparateur principal : la flèche prend le même rang que le bouton ⇵
   pour rester sur la première ligne, juste après lui. Le résumé gris
   (.domMini) est en rang 3 et passe dessous — il ne doit pas s'intercaler.
   Deux familles de séparateurs coexistent dans le site et se partagent déjà
   la même mise en page : .sectionAcc (positions, figures, missions des pages
   transit/progressé/synastrie) et .domWrap (Clé d'Ishtar, mission de vie,
   dominantes, karma — page natale). Les deux en ont besoin : c'est .domWrap
   qui manquait, d'où les séparateurs mission sans flèche. */
details.sectionAcc > summary.sectionSum::after,
details.domWrap > summary::after{ order:2; }

/* ── Le bouton ⇵ et la flèche restent ensemble, à droite ──
   .proAccSum répartit ses éléments avec « space-between ». Avec le titre,
   le bouton ⇵ et la flèche, cela faisait trois éléments répartis sur toute
   la largeur : le ⇵ atterrissait au milieu de la ligne.
   Une marge automatique à gauche du ⇵ absorbe tout l'espace libre : le titre
   reste à gauche, le ⇵ et la flèche partent ensemble à droite. La règle
   existait déjà, mais seulement dans les Paramètres — on la généralise. */
.proAccSum > .proOpenAllBtn{ margin-left:auto; }

@media (max-width: 768px){
  .proSubSum::after,
  .proAccSum::after,
  details.sectionAcc > summary.sectionSum::after,
  details.domWrap > summary::after,
  [data-submenu="affichage"] .affAccSum::after{ display:none; }
}

.proGroupTitleBtn{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  margin:0;
  font-size:12px;
  font-weight:800;
  color:#333;
  text-transform:none;   /* important: pas de CAPS */
  letter-spacing:0;
}

.proGroupState{
  width:14px;
  height:14px;
  border-radius:4px;
  border:2px solid rgba(23,40,82,0.35);
  display:inline-block;
  cursor:pointer;
  flex-shrink:0;

}
/* États visuels (pilotés par JS) */
.proSubSum.isAll .proGroupState{
  background:#172852;
  border-color:#172852;
}
.proSubSum.isPartial .proGroupState{
  background: rgba(23,40,82,0.25);
  border-color:#172852;
}

/* liste d’options (rendu Paramètres : aspCheck déjà stylé dans ton CSS) */
/* Liste d’options PRO : 2 colonnes si l’écran a de la place */
.proCheckList{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;   /* 2 colonnes */
  gap:8px 14px;                     /* ligne / colonne */
  align-items:start;
}

/* Pas de retour à 1 colonne sur téléphone : les deux colonnes tiennent, et
   elles divisent par deux la hauteur de chaque accordéon. Le resserrement
   de l'écart est en fin de fichier, dans le bloc mobile. */
/* PRO : éléments indisponibles (désactivés via Paramètres) */
.proPanel .aspCheck.isDisabled{
  opacity:0.35;
  pointer-events:none;
}
.aspCheck.isDisabled input{
  filter: grayscale(1);
}
.proSubAcc.isDisabled{
  opacity:0.40;
}

/* boutons bas */
.proActions{
  display:flex;
  flex-direction:column;   /* ✅ empile : ligne du haut + bouton dessous */
  gap:8px;
  margin-top:12px;
}

/* Ligne du haut : Reset à gauche / Appliquer à droite */
.proActionsRow{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;              /* ✅ permet le push à droite */
}

/* pousse Appliquer à droite */
.proActionsRow #btnProApply{
  margin-left:auto;
}

/* bouton sur toute la largeur (ligne du bas) */
.proBtnFull{
  width:100%;
}

.proBtn{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  background:#fff;
  font-size:12px;
  cursor:pointer;
  font-weight:700;                 /* ✅ moins gras */
  color:#333;
  text-transform: uppercase;        /* ✅ tu veux CAPS */
  letter-spacing:0.08em;
}

.proBtnNeutral:hover{ background:#f3f5fb; }

/* ✅ APPLIQUER = même logique que Paramètres (contour rouge + texte rouge) */
#btnProApply{
  border-width:2px;                /* comme #btnApplyParams/#btnApplyOrbs */
  font-weight:800;                 /* comme Paramètres */
}

#btnProApply:not([disabled]){
  border-color:#94361D;
  color:#94361D;
  background:#fff;
  opacity:1;
}

#btnProApply:not([disabled]):hover{
  background: rgba(148,54,29,0.10);
}

/* ✅ disabled “propre”, pas gris sale */
#btnProApply[disabled]{
  border-color: rgba(148,54,29,0.25);
  color: rgba(148,54,29,0.35);
  background:#fff;
  opacity:1;
  cursor:not-allowed;
  filter: grayscale(0.3);
}

/* Réinitialiser / Restaurer restent neutres quand disabled */
.proBtn:disabled{
  cursor:not-allowed;
}

/* ✅ LOTS : Appliquer = même style que #btnProApply */
#btnLotsApply{
  border-width:2px;
  font-weight:800;
}
#btnLotsApply:not([disabled]){
  border-color:#94361D;
  color:#94361D;
  background:#fff;
  opacity:1;
}
#btnLotsApply:not([disabled]):hover{
  background: rgba(148,54,29,0.10);
}

/* ✅ Pousse Appliquer lots à droite (même layout que filtre) */
.proActionsRow #btnLotsApply{
  margin-left:auto;
}

/* ✅ Sauvegarder preset : contour or (comme ENREGISTRER du thème) */
#btnProSavePreset,
#btnLotsSavePreset{
  border-color: rgba(212,160,72,0.55);
  border-width: 2px;
}
#btnProSavePreset:hover,
#btnLotsSavePreset:hover{
  background: rgba(243,217,135,0.22);
}


.proPlaceholder{
  padding:12px;
  border:1px dashed rgba(23,40,82,0.25);
  border-radius:14px;
  background: rgba(247,246,242,0.55);
  font-size:13px;
  color:#333;
}

/* Textbox : prend tout le reste */
#analysisBox{
  background:#fff;
  border: var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  padding:16px;

  flex: 1 1 auto;
  min-height:0;
  overflow:auto;
}

/* Harmonisation typo : menu + textbox */
#modePanel{
  font-size: 13px;
  line-height: 1.35;
}

#analysisBox{
  font-size: 14px;
  line-height: 1.45;
}

/* Chaînes (pré) : un poil plus petit pour que tout rentre */
#analysisBox .analysisPre{
  margin: 0;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
}

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

/* ===============================
   POSITIONS
   =============================== */
#positions{
  margin:30px auto;
  background:#fff;
  padding:28px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
}
#positions h2{
  margin-top:0;
  text-transform: uppercase;
  font-size:17px;
  letter-spacing:0.06em;
}
#positions ul{
  list-style:none;
  padding:0;
  columns:2;
  margin:0;
  font-size:15px;
}
#positions li{ margin-bottom:6px; }
#positions li strong{ color:#222; }

/* --- Messages (flash + erreur) --- */
.flashMsg{
  margin-top:14px;
  padding:10px;
  border-radius:8px;
  border:1px solid #cfe7cf;
  background:#e9f8e9;
  color:#135f13;
}

.errorMsg{
  background:#ffe5e5;
  padding:10px;
  margin-top:18px;
  border-radius:8px;
  border:1px solid #ffb4b4;
  color:#b00000;
}
/* ===============================
   Affichage > Onglets internes + Aspects
   =============================== */
.affTabs{
  display:flex;
  gap:8px;
  margin: 8px 0 10px 0;

  /* séparateur (fusionné) */
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5ee;
}
.affTabBtn{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  background:#fff;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  cursor:pointer;
}
.affTabBtn.active{
  background:#172852;
  color:#fff;
  border-color:#172852;
}

.affTabPanel[data-aff-tab="types"]{
  padding-top: 10px;
}


/* Onglet 2 : Aspects */
.aspQuick{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;

  /* séparateur (fusionné) */
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5ee;
}
.aspQuickBtn{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  background:#fff;
  font-size:12px;
  cursor:pointer;
}
.aspQuickBtn:active{ transform: translateY(1px); }

.aspGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 12px;
}
.aspGroupTitle{
  grid-column: 1 / -1;
  margin-top:8px;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  font-weight:800;
  color:#333;
}
.aspCheck{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#222;
}
.aspCheck input{ width:auto; margin:0; }

/* ✅ grisé = indisponible */
.aspCheck.isDisabled{
  opacity:0.35;
  pointer-events:none;
}

.aspResetRow{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}
.aspResetBtn{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  background:#fff;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  cursor:pointer;
}


/* ===============================
   Boutons Paramètres : états clairs
   =============================== */

/* Base (hérite de .aspResetBtn, mais on renforce un peu) */
#btnApplyParams,
#btnApplyPro,
#btnApplyOrbs{
  border-width: 2px;
  font-weight: 800;
}

/* ✅ Appliquer = contour rouge Astraema quand ACTIF */
#btnApplyParams:not([disabled]),
#btnApplyPro:not([disabled]),
#btnApplyOrbs:not([disabled]){
  border-color: #94361D;
  color: #94361D;
  background: #fff;
  opacity: 1; /* important si un style global baisse l’opacité */
}

/* hover actif */
#btnApplyParams:not([disabled]):hover,
#btnApplyPro:not([disabled]):hover,
#btnApplyOrbs:not([disabled]):hover{
  background: rgba(148,54,29,0.10);
}

/* ✅ disabled = vraiment “inactif” (et pas ambigu) */
#btnApplyParams[disabled],
#btnApplyPro[disabled],
#btnApplyOrbs[disabled]{
  border-color: rgba(148,54,29,0.25);
  color: rgba(148,54,29,0.35);
  background: #fff;
  opacity: 1;              /* on évite le “gris sale” */
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* Optionnel : petit “glow” propre au focus clavier */
#btnApplyParams:focus-visible,
#btnApplyPro:focus-visible,
#btnApplyOrbs:focus-visible{
  outline: 3px solid rgba(148,54,29,0.25);
  outline-offset: 2px;
}
/* Export = bouton neutre (navy) */
#btnExportOrbs{
  border-width: 2px;
  border-color: rgba(23,40,82,0.35);
  color: #172852;
  font-weight: 800;
}
#btnExportOrbs:hover{
  background: rgba(23,40,82,0.06);
}

/* ✅ Paramètres : onglets qui WRAP et restent dans la carte */
#modePanel [data-submenu="params"] .affTabs{
  flex-wrap: wrap;
}

#modePanel [data-submenu="params"] .affTabBtn{
  white-space: nowrap;
  font-size: 11px;
  padding: 8px 10px;
}
/* ✅ Paramètres : onglets top (Paramètres / Orbes Pro) */
#modePanel [data-submenu="params"] .paramTopTabs{
  display:flex;
  gap:8px;
  margin: 8px 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5ee;
  flex-wrap: wrap;
}

#modePanel [data-submenu="params"] .paramTopBtn{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e1e4f0;
  background:#fff;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  cursor:pointer;
}

#modePanel [data-submenu="params"] .paramTopBtn.active{
  background:#172852;
  color:#fff;
  border-color:#172852;
}
/* Quand on revient d'un "Appliquer", on cache la roue le temps qu'elle se stabilise
   (comme ça, aucun saut visible) */
html[data-astra-recalc="1"] #wheelCard{
  transition: none !important;
}
/*Ça sauve la legende des maitres - ne pas effacer sans correction ailleurs*/
.maitreLegend{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:10px;
}
.maitreLegend .lg{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid #e1e4f0;
  font-size:12px; opacity:.95;
}
.maitreLegend .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--c);
}
#maitreLegend{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  user-select:none;
}

#maitreLegend .lgRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  margin:0;
  border:none;
  background:none;
  cursor:default;
}

#maitreLegend .lgSwatch{
  width:14px;
  height:14px;
  border-radius:3px;
  display:inline-block;

  /* IMPORTANT : empêche le carré de se faire écraser en "trait" */
  flex: 0 0 14px;     /* largeur fixe en flex */
  flex-shrink: 0;     /* double sécurité */
}


/* =========================================================
   MAÎTRES — Légende : couleurs de secours (sans toucher au JS)
   - Le JS met un style inline: background:...
   - Si ce style est vide/invalide => le carré devient transparent
   - On force alors des couleurs par défaut, dans l’ordre affiché
   ========================================================= */

/* petit contour pour que le carré reste visible même si la teinte est claire */
#maitreLegend .lgSwatch{
  border: 1px solid rgba(0,0,0,0.10);
}

/* Ordre rendu par le JS :
   1 Domicile, 2 Exaltation, 3 Exil, 4 Chute, 5 Trigonocratie, 6 Aucune */
#maitreLegend .lgRow:nth-child(1) .lgSwatch{ background:#2ECC71; } /* Domicile = vert */
#maitreLegend .lgRow:nth-child(2) .lgSwatch{ background:#2D7CFF; } /* Exaltation = bleu */
#maitreLegend .lgRow:nth-child(3) .lgSwatch{ background:#E0503B; } /* Exil = rouge */
#maitreLegend .lgRow:nth-child(4) .lgSwatch{ background:#F39C12; } /* Chute = orange */
#maitreLegend .lgRow:nth-child(5) .lgSwatch{ background:#8E44AD; } /* Trigonocratie = violet */
#maitreLegend .lgRow:nth-child(6) .lgSwatch{ background:#9AA0A6; } /* Aucune = gris */

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

/* Harmonisation typographique : panneau + text box */
#modePanel, #analysisBox{
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Boutons/labels du panneau (sans toucher la barre Modes) */
#modePanel .subBtns .viewBtn,
#modePanel .aspQuickBtn,
#modePanel .paramTopBtn,
#modePanel .aspCheck,
#modePanel select{
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

/* Textes longs (maîtrises / chaînes) : un chouïa plus petit */
#analysisBox pre{
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
}

/* ✅ Maîtrises : les "onglets" (Maîtrises / Chaîne) doivent être BLEUS quand actifs */
#modePanel [data-submenu="maitrises"] .viewBtn.active{
  background:#172852;
  color:#fff;
  border-color:#172852;
}



/* Les items de légende (tes .lgRow existent déjà) */
#modePanel [data-submenu="maitrises"] #maitreLegend .lgRow{
  width: calc(50% - 6px);
  background:#fff;
  border:1px solid rgba(23,40,82,0.10);
  border-radius: 12px;
  padding: 8px 10px;
}

/* Mobile : 1 colonne */
@media (max-width: 520px){
  #modePanel [data-submenu="maitrises"] #maitreLegend .lgRow{
    width: 100%;
  }
}

/* 5) Options : alignement texte gauche / checkbox droite
   On suppose que le JS génère des <label class="aspCheck"><input ...> Texte</label>
*/
#modePanel [data-submenu="maitrises"] #maitreLegend label.aspCheck{
  width: 100%;
  background:#fff;
  border:1px solid rgba(23,40,82,0.10);
  border-radius: 12px;
  padding: 10px 12px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  /* met la checkbox à droite, texte à gauche (sans toucher au HTML) */
  flex-direction: row-reverse;
  gap: 10px;
}

/* 6) Bouton bas : plein largeur, blanc, comme un reset PRO */
#modePanel [data-submenu="maitrises"] .maitreBottomAction{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

#modePanel [data-submenu="maitrises"] .maitreBottomAction #btnClearMaitres{
  width: 100%;
  max-width: 520px;
  background:#fff;
  border-width: 2px;
}

/* ===============================
   DOMINANTES (sous la roue)
   - Pas de badge dans le TITRE des accordéons
   - Badges (pills) colorés UNIQUEMENT dans le corps, via data-planet
   =============================== */

#dominantesBox{
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2)));
  margin: 16px auto 0 auto;
  background:#fff;
  padding: 18px 22px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
  box-sizing:border-box;
  font-family: inherit;

  --dom-ink: #15151a;
  --dom-muted: rgba(0,0,0,0.62);
  --dom-paper: rgba(247,246,242,0.78);
}

#dominantesBox summary{ list-style:none; }
#dominantesBox summary::-webkit-details-marker{ display:none; }

/* En-tête global "Signature — Dominantes" */
#dominantesBox .domWrap > summary{
  cursor:pointer;
  user-select: text; -webkit-user-select: text;
  display:flex;
  align-items:center;          /* ✅ aligné propre */
  justify-content:flex-start;  /* ✅ plus de "à droite" */
  gap:14px;                    /* ✅ rapproché du titre */
  flex-wrap:wrap;              /* ✅ permet la 2e ligne */
  padding: 6px 2px 12px 2px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Police du titre : voir le bloc commun « EN-TÊTES DES SÉPARATEURS ».
   La petite flèche ▾ a été retirée (on clique sur le titre pour ouvrir). */
#dominantesBox .domTitle{
  line-height:1.2;
}
#dominantesBox .domMini{
  font-size: 12.5px;
  color: var(--dom-muted);
  line-height: 1.35;
  font-weight: 400;

  /* ✅ Toujours en 2e ligne */
  flex: 1 1 100%;
  max-width: 100%;
  margin-top: 6px;

  /* ✅ Ne dépasse jamais la box */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  /* ✅ Texte justifié */
  text-align: justify;
  hyphens: auto;
}

/* Labels de la signature (Régente, Filtre, etc.) */
#dominantesBox .domMini .domLbl{
  font-weight: 800;
  color: rgba(0,0,0,0.72); /* discret, mais lisible */
}




/* Liste des sections (Régente / Filtre / ...) */
#dominantesBox .domSignature{
  /* Accordéons internes : pleine largeur comme avant, mais moins “haut” */
  margin-top: 8px;
  display:grid;
  gap: 4px;
}


#dominantesBox .domSigItem{
  border-top: 1px dashed rgba(0,0,0,0.10);
  padding: 0;
  margin: 0;
}

/* Titre de section (summary interne) */
#dominantesBox .domSigSum{
  cursor: pointer;
  display:block;
  padding: 6px 0;
}
#dominantesBox .domSigSum::-webkit-details-marker{ display:none; }

/* k / v dans le titre — version “une seule ligne” */
#dominantesBox .domSigSum{
  white-space: nowrap;       /* ✅ pas de retour à la ligne */
  overflow: hidden;          /* ✅ si trop long, on coupe */
  text-overflow: ellipsis;   /* ✅ ... */
}

/* On n'utilise plus la grille 2 colonnes : tout est inline */
#dominantesBox .domSigKV{
  display:block;
}

/* “Régente :” (et autres) */
#dominantesBox .domSigKV .k{
  font-weight: 650;
  color: rgba(0,0,0,0.70);
  white-space: nowrap;
}

/* la valeur (Mercure, Cancer (Lune), etc.) */
#dominantesBox .domSigKV .v{
  font-weight: 650;
  color: #94361D; /* ✅ rouge Astraema : uniquement le résultat */
  white-space: nowrap;
}

/* les petits compléments (Boucle..., +1 autre...) restent sur la même ligne */
#dominantesBox .domSigKV .domInlineMuted{
  white-space: nowrap;
}

/* Corps */
#dominantesBox .domSigBody{
  padding: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dom-ink);
}

#dominantesBox .domLine{
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(0,0,0,0.78);
}
/* ✅ Sous-titre + badge sur la même ligne */
#dominantesBox .domLineRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap; /* si ça dépasse, ça passe à la ligne proprement */
}
/* ✅ Groupe de badges sur la même ligne (et wrap si besoin) */
#dominantesBox .domPillGroup{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

#dominantesBox .domMuted{
  color: var(--dom-muted);
  font-size: 13.5px;
}
#dominantesBox .domLabel{
  font-weight: 650;
  margin: 12px 0 6px 0;
  color: rgba(0,0,0,0.72);
}

#dominantesBox .domHubGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 14px;
  margin-top: 10px;
}
@media (max-width: 760px){
  #dominantesBox .domHubGrid{ grid-template-columns: 1fr; }
}
#dominantesBox .domHubCol{ min-width:0; }

#dominantesBox .domInlineMuted{
  opacity: .70;
  font-size: 12.5px;
  margin-left: 8px;
  font-weight: 400;
}
/* ✅ Dans le titre "Gouvernance", la Boucle doit être lisible (même taille que Gouvernance) */
#dominantesBox .domSigSum .domInlineMuted{
  font-size: 1em;      /* même taille que le reste du titre */
  font-weight: 650;    /* même poids que la valeur */
  opacity: .75;        /* reste un peu plus discret que la valeur principale */
}

/* ===== Pills (badges internes) ===== */

/* 1) RÉSULTATS (par défaut) : blanc + contour gris */
#dominantesBox .domPill{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background:#fff; /* ✅ blanc */
  border: 1px solid rgba(23,40,82,0.18); /* ✅ contour gris */
  border-radius:999px;

  padding:10px 14px;
  font-weight:650;
  color:#172852;
}

/* 2) RÉSULTATS "planètes" : contour coloré (prend --accent si présent, sinon mapping --pc) */
#dominantesBox .domPill[data-planet]{
  border-width: 2px;
  border-style: solid;
  border-color: var(--accent, var(--pc, rgba(23,40,82,0.25)));
  background:#fff; /* ✅ reste blanc */
  color:#172852;
}


/* 3) DUO (boucle) : contour dégradé — 2px comme le solo */
#dominantesBox .domPill.is-duo,
#dominantesBox .domPill[data-planets]{
  border: 2px solid transparent; /* ✅ compense l'effet “dégradé plus fin” */
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg, var(--pc1, #172852), var(--pc2, #94361D)) border-box;
  background-clip: padding-box, border-box;
    color: #172852; /* même couleur que les badges “1 planète” */

  /* ✅ garde exactement la même taille extérieure que les pills solo */
  padding: 9px 13px;
}



/* 4) AIDES / EXPLICATIONS : beige (ça NE DOIT PAS être .domPill) */
#dominantesBox .domExplain{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--dom-paper); /* ✅ beige */
  border: 1px solid rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.80);
}

/* ===== Mapping couleurs planètes (Astraema) ===== */
/* Mapping appliqué aux domPill qui ont data-planet */
#dominantesBox .domPill[data-planet="Soleil"]  { --pc: #F5A623; }
#dominantesBox .domPill[data-planet="Lune"]    { --pc: #79C7FF; }
#dominantesBox .domPill[data-planet="Mercure"] { --pc: #5B6CFF; }
#dominantesBox .domPill[data-planet="Vénus"]   { --pc: #D24DA0; }
#dominantesBox .domPill[data-planet="Mars"]    { --pc: #E0503B; }
#dominantesBox .domPill[data-planet="Jupiter"] { --pc: #2D7CFF; }
#dominantesBox .domPill[data-planet="Saturne"] { --pc: #9B5A2E; }
#dominantesBox .domPill[data-planet="Uranus"]  { --pc: #00B8D9; }
#dominantesBox .domPill[data-planet="Neptune"] { --pc: #233C8F; }
#dominantesBox .domPill[data-planet="Pluton"]  { --pc: #8B1E3F; }


/* ===============================
   SYNTHESE ENERGETIQUE (interne) — même design que DOMINANTES
   =============================== */

#energySynthBox{
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2)));
  margin: 16px auto 0 auto;
  background:#fff;
  padding: 18px 22px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
  box-sizing:border-box;
  font-family: inherit;

  --dom-ink: #15151a;
  --dom-muted: rgba(0,0,0,0.62);
  --dom-paper: rgba(247,246,242,0.78);
}

#energySynthBox summary{ list-style:none; }
#energySynthBox summary::-webkit-details-marker{ display:none; }

/* En-tête global */
#energySynthBox .domWrap > summary{
  cursor:pointer;
  user-select: text; -webkit-user-select: text;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  flex-wrap:wrap;
  padding: 6px 2px 12px 2px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Police du titre : voir le bloc commun « EN-TÊTES DES SÉPARATEURS ». */
#energySynthBox .domTitle{
  line-height:1.2;
}

#energySynthBox .domMini{
  font-size: 12.5px;
  color: var(--dom-muted);
  line-height: 1.35;
  font-weight: 400;

  flex: 1 1 100%;
  max-width: 100%;
  margin-top: 6px;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  text-align: justify;
  hyphens: auto;
}

#energySynthBox .domSignature{
  /* Accordéons internes : pleine largeur comme avant, mais moins “haut” */
  margin-top: 8px;
  display:grid;
  gap: 4px;
}


#energySynthBox .domSigItem{
  border-top: 1px dashed rgba(0,0,0,0.10);
  padding: 0;
  margin: 0;
}

#energySynthBox .domSigSum{
  cursor: pointer;
  display:block;
  padding: 6px 0;
}
#energySynthBox .domSigSum::-webkit-details-marker{ display:none; }

#energySynthBox .domSigSum{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#energySynthBox .domSigKV{ display:block; }

#energySynthBox .domSigKV .k{
  font-weight: 650;
  color: rgba(0,0,0,0.70);
  white-space: nowrap;
}

#energySynthBox .domSigKV .v{
  font-weight: 650;
  color: #94361D;
  white-space: nowrap;
}

#energySynthBox .domSigBody{
  padding: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dom-ink);
}

#energySynthBox .domLine{
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(0,0,0,0.78);
}

#energySynthBox .domExplain{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--dom-paper);
  border: 1px solid rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.80);
}

#energySynthBox .domWarn{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(148,54,29,0.06);
  border: 1px solid rgba(148,54,29,0.20);
  color: #94361D;
  font-weight: 650;
}



/* ===============================
   PRO — icône “tout ouvrir / tout fermer” (⇵)
   =============================== */
.proOpenAllBtn{
  border:none;
  background:transparent;
  padding:0 2px;
  margin-left:10px;
  font-size:14px;
  line-height:1;
  opacity:.55;
  cursor:pointer;
}
.proOpenAllBtn:hover{ opacity:.85; }
.proOpenAllBtn:active{ transform: translateY(1px); }
.proOpenAllBtn:focus-visible{
  outline: 2px solid rgba(23,40,82,0.25);
  outline-offset: 2px;
  border-radius: 6px;
}



/* ═══════════════════════════════════════════════════════════════════════
   EN-TÊTES DES SÉPARATEURS — un seul réglage pour toutes les roues

   Les séparateurs sous la roue (Clé d'Ishtar, Mission de vie, Dominantes,
   Karmas lunaires, Synthèse énergétique, Positions, Aspects, Figures)
   avaient chacun leur propre en-tête : polices différentes, petite flèche
   ▾ présente ici et absente là, ⇵ qui retombait sur une deuxième ligne.
   theme.css étant chargé par les quatre roues (natal, transit, progressé,
   synastrie), ce bloc les gouverne toutes ; les surcharges qui faisaient
   double emploi ont été retirées de transit.css, progresse.css et
   synastrie.css.

   Une seule règle les gouverne désormais :
     • on clique sur le titre (ou n'importe où dans l'en-tête) pour ouvrir
       le séparateur — la petite flèche ▾ / › a été retirée partout ;
     • la double flèche ⇵ reste, à droite sur la MÊME ligne que le titre :
       c'est elle qui déroule le contenu intérieur ;
     • le résumé gris (.domMini) passe toujours en dessous, quelle que
       soit sa place dans le HTML — d'où le `order` ;
     • une seule police de titre pour tous : celle des deux missions.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) La barre d'en-tête — par CLASSE, donc valable sur les quatre roues
   (natal, transit, progressé, synastrie) sans avoir à lister les blocs
   page par page. */
details.domWrap > summary,
details.sectionAcc > summary.sectionSum{
  display:flex;
  align-items:center;
  flex-wrap:wrap;          /* le résumé gris peut passer à la ligne */
  gap: 8px 10px;
}

/* 2) Le titre — même police partout (celle des missions) */
details.domWrap > summary .domTitle,
details.sectionAcc > summary.sectionSum .sectionTitle{
  /* base 0 : le titre ne force jamais le retour à la ligne, donc la ⇵
     reste sur sa ligne même quand le titre est long (téléphone). */
  flex: 1 1 0;
  min-width: 0;
  order: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: none;
  letter-spacing: normal;
}

/* 3) La double flèche ⇵ — collée à droite, sur la ligne du titre */
details.domWrap > summary .proOpenAllBtn,
details.sectionAcc > summary.sectionSum .proOpenAllBtn{
  margin-left:auto;
  flex: 0 0 auto;
  order: 2;          /* toujours la dernière de la ligne */
}

/* 3-bis) Le bouton « copier » — une icône discrète, TOUJOURS juste avant
   la ⇵. Sa place ne vient pas du HTML : la ⇵ est ajoutée par d'autres
   scripts, tantôt avant tantôt après, et le bouton sautait d'un côté à
   l'autre selon la page. C'est `order` qui décide, une fois pour toutes :
   titre (0) · copier (1) · ⇵ (2) · résumé gris (3). */
details.domWrap > summary .copySepBtn,
details.sectionAcc > summary.sectionSum .copySepBtn{
  order: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  margin-left: 10px;
  border: none;
  background: transparent;
  color: inherit;
  line-height: 1;
  opacity: .55;                 /* même discrétion que la ⇵ voisine */
  cursor: pointer;
  transition: opacity .15s, color .15s;
}
details.domWrap > summary .copySepBtn:hover,
details.sectionAcc > summary.sectionSum .copySepBtn:hover{
  opacity: .95;
  color: #172852;
}
details.domWrap > summary .copySepBtn:focus-visible,
details.sectionAcc > summary.sectionSum .copySepBtn:focus-visible{
  outline: 2px solid rgba(23,40,82,0.25);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Confirmation : la coche passe au vert une seconde et demie. Les icônes
   sont dessinées en currentColor, donc rien d'autre à changer. */
.copySepBtn.copSepOk{
  color: #2f7d4f !important;
  opacity: 1 !important;
}

/* 4) Le résumé gris — toujours en dessous */
details.domWrap > summary .domMini,
details.sectionAcc > summary.sectionSum .domMini{
  flex: 0 0 100%;
  min-width: 0;
  order: 3;          /* après le titre et les deux boutons */
}

/* Cas particulier du progressé et de ses variantes (draconique,
   harmonique, révolution solaire…) : là-bas, le résumé gris est écrit À
   L'INTÉRIEUR du titre, pas à côté. Ce n'est donc pas un élément de la
   ligne d'en-tête, et la règle ci-dessus ne peut rien pour lui : il se
   collait au titre, sur la même ligne. `display:block` lui rend sa
   ligne, comme sur le natal. */
.sectionTitle .domMini,
.domTitle .domMini{
  display: block;
  margin-top: 4px;
  font-weight: 400;
}

/* ===============================
   Accordéons dans #positions (Positions / Maisons / Aspects)
   - Même logique visuelle : titre à gauche, ⇵ à droite
   =============================== */
/* Mise en page et police : voir le bloc commun « EN-TÊTES DES SÉPARATEURS ». */
#positions details.sectionAcc > summary.sectionSum{
  cursor:pointer;
  user-select: text; -webkit-user-select: text;
}


/* on garde le contenu identique, juste un peu d’air */
#positions details.sectionAcc > .sectionBody{
  padding-top: 10px;
}

/* optionnel : espacement entre les 3 blocs */
#positions details.sectionAcc{
  margin-top: 12px;
}



/* ===============================
   Paramètres > Paramètres : Options d'affichage (style Affichage Pro)
   =============================== */
[data-submenu="params"] details.paramDisplayOptions.proAcc{
  background: rgba(247,246,242,0.55); /* même beige que pro */
}

[data-submenu="params"] .paramOptGroups{
  margin-top: 10px;
}

[data-submenu="params"] .paramOptAcc .paramOptBody{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  box-sizing:border-box;
  gap: 10px;
  margin-top: 10px;
}

/* Le titre dans les sous-accordéons paramètres : un peu plus grand */
[data-submenu="params"] .paramOptAcc .proGroupTitleBtn{
  font-size: 15px;
  font-weight: 800;
}

/* Dans paramètres : les labels gardent l’alignement propre */
[data-submenu="params"] .paramOptAcc label.aspCheck{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Select "Domification" : un peu d’air */
/* Select "Domification" : largeur pleine + un peu d'air */
[data-submenu="params"] .paramOptAcc select{
  margin-top: 6px;
  width: 100%;
  box-sizing: border-box;
  display: block;
}



/* ===============================
   Paramètres : “Options d'affichage” — ⇵ à droite + texte explicatif
   =============================== */
[data-submenu="params"] details.paramDisplayOptions > summary.proAccSum{
  align-items:center;
}

[data-submenu="params"] details.paramDisplayOptions > summary.proAccSum .proOpenAllBtn{
  margin-left:auto;
}

/* Texte explicatif */
[data-submenu="params"] .paramHint{
  font-size: 12px;
  color: rgba(23,40,82,0.75);
  line-height: 1.35;
  margin-bottom: 8px;
}
[data-submenu="params"] .paramHint .muted{
  color: rgba(23,40,82,0.60);
}

/* Espace entre blocs fusionnés */
[data-submenu="params"] .paramMerged > div + div{
  margin-top: 10px;
}



/* ===============================
   Paramètres : “Options d'affichage” — listes
   =============================== */
[data-submenu="params"] .paramList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

[data-submenu="params"] details.paramDisplayOptions > summary.proAccSum .proOpenAllBtn{
  margin-left:auto;
}



/* ===============================
   Paramètres : titres des sous-accordéons (comme Affichage Pro, moins gras)
   + pas de carré d’état
   =============================== */
[data-submenu="params"] .paramOptAcc .proGroupTitleBtn{
  font-size:12px;
  font-weight:700;
}

[data-submenu="params"] .paramOptAcc .proGroupState{
  display:none !important;
}


/* =========================
   Liste Aspects : couleur du NOM de l’aspect
   (n’affecte pas la roue, seulement la liste)
   ========================= */

.aspDot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 3px;
  flex-shrink: 0;
}
.aspLabel{
  font-weight: 500;     /* pour que ça ressorte */
}
/* Séparateur Positions > titre "Maisons" :
   - pas en CAPS
   - ajoute de l'air avant (gagne contre #positions h2)
*/
#positions h2.housesTitle{
  text-transform: none;   /* => "Maisons" reste "Maisons" */
  margin-top: 18px;       /* => air au-dessus */
  padding-top: 6px;       /* => micro-air supplémentaire */
}


/* ===============================
   POSITIONS — alignement 2 colonnes + boîte beige détails
   =============================== */

/* ✅ La liste Positions passe en GRID (alignée), au lieu d'un flux "colonnes" */
#positions details.sectionAcc[data-section-key="positions"] .sectionBody ul{
  /* ✅ 2 colonnes en “lecture verticale” :
     Soleil, Lune, Mercure… puis on continue en colonne 2 */
  columns: 2;
  column-gap: 48px;
  padding: 0;
  margin: 0;
}

/* ✅ évite qu’un item se coupe entre 2 colonnes */
#positions details.sectionAcc[data-section-key="positions"] .sectionBody li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}



/* Chaque ligne reste "propre" */
#positions details.sectionAcc[data-section-key="positions"] .sectionBody ul > li{
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid #e5e5ee;
}

/* ✅ Summary (ligne cliquable) : alignement stable */
#positions details.posItemAcc > summary{
  display: flex;
  align-items: center;
  gap: 8px;
  /* Sans ces 2 lignes, les navigateurs à moteur WebKit (Safari, et
     certaines versions de Chrome) rendent TOUT <summary> non-
     sélectionnable par défaut — c'est ce qui empêchait de copier
     "Saturne R 22°01' Bélier, maison 1" quand l'accordéon est fermé,
     alors qu'aucune règle du site ne le demandait explicitement. */
  user-select: text;
  -webkit-user-select: text;
}

/* ✅ Intérieur accordéon : boîte beige (comme Dominantes) */
#positions .posDetailBox{
  background: rgba(247,246,242,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 12px 14px;
}


/* ✅ Aspects forts : 2 colonnes, aligné avec le titre, sans retrait "liste" */
#positions .posStrongList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 6px;
}
/* ✅ Anti "tiret clignotant" (caret) sur la roue SVG */
#svg, #svg * {
  -webkit-user-select: none;
  user-select: none;
}

/* (optionnel, iOS/Chrome : enlève le flash au tap) */
#svg {
  -webkit-tap-highlight-color: transparent;
}
/* =========================================================
   PARAMÈTRES PRO — mise au goût du jour (avec 3 cartes blanches)
   - fond beige uniquement derrière les cartes
   - 3 rectangles blancs (Vue par défaut / Orbes / Options)
   - actions : reset + appliquer sur une ligne
   - sauvegarde centrée dessous
   ========================================================= */

#modePanel [data-submenu="params"] .paramProWrap{
  background: rgba(247,246,242,0.65);
  border: 1px solid #e5e5ee;
  border-radius: 14px;
  padding: 10px;
}

/* ✅ Les 3 zones = cartes blanches séparées */
#modePanel [data-submenu="params"] .paramProWrap .paramCard{
  background: #fff;
  border: 1px solid rgba(23,40,82,0.10);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

#modePanel [data-submenu="params"] .paramProWrap .paramCard:last-child{
  margin-bottom: 0;
}

/* Titres de cartes cohérents */
#modePanel [data-submenu="params"] .paramProWrap .paramCardTitle{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #333;
  margin-bottom: 10px;
}

/* Actions : même ligne (comme tu veux) */
#modePanel [data-submenu="params"] .paramActionsRow{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Sauvegarder : dessous, centré */
#modePanel [data-submenu="params"] .paramSaveRow{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

#modePanel [data-submenu="params"] .paramSaveRow #btnExportOrbs{
  width: 100%;
  max-width: 360px;
}
/* PARAMÈTRES PRO — Vue par défaut : select plein largeur */
#modePanel [data-submenu="params"] .paramTopPanel[data-param-top="orbes"] #selDefaultView{
  width: 100%;
  display: block;
}

/* optionnel : si le label .aspCheck est en flex ailleurs, on neutralise */
#modePanel [data-submenu="params"] .paramTopPanel[data-param-top="orbes"] .paramCard:first-child label.aspCheck{
  display: block;
}

/* ============================
   Calcul Pro — Palette + Undo/Redo (PROPRE)
   - flèches undo/redo en haut à droite
   - palette alignée (pastilles cliquables)
   - résultat (sans titre, vide si rien)
   - bouton effacer tout
   ============================ */

#proColorWheelUI{
  width:100%;
}

/* Flèches en haut à droite */
.proProTopTools{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  width:100%;
  margin: 0 0 14px 0; /* air sous les flèches */
}

/* Boutons flèches ronds */
.proIconBtn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.proIconBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 14px rgba(0,0,0,0.14);
}
.proIconBtn:disabled{
  opacity:.35;
  cursor:default;
  transform:none;
  box-shadow:none;
}
.proIconBtn svg{
  width:16px;
  height:16px;
}

/* Palette alignée (sur une ligne) */
.proPaletteRow{
  display:flex;
  flex-wrap:nowrap;     /* ✅ évite que la dernière pastille tombe en dessous */
  gap:12px;
  align-items:center;
  margin: 0 0 16px 0;   /* ✅ air sous la palette */
  overflow-x:auto;      /* si écran trop étroit, ça scroll horizontalement */
  padding-bottom:2px;
}

/* Pastilles */
.proSwDot{
  width:26px;
  height:26px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.92);
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  cursor:pointer;
  padding:0;
  position:relative;
  flex:0 0 auto;
}
.proSwDot:hover{
  transform: translateY(-1px);
}

/* “Sans trait” : blanc + diagonale */
.proSwNone{
  background:#fff;
  border:2px solid rgba(0,0,0,0.18);
}
.proSwNone::before{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:50%;
  height:2px;
  background: rgba(0,0,0,0.60);
  transform: rotate(-25deg);
  border-radius:99px;
}

/* Sélection */
.proSwDot.proSel{
  outline: 3px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

/* ✓ uniquement sur les couleurs (pas sur “Sans trait”) */
.proSwDot:not(.proSwNone).proSel::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color: var(--ink, rgba(255,255,255,0.95));
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  pointer-events:none;
}

/* Résultat : si vide, on garde juste de l’air (pas de "—") */
.proResultSpacer{
  height:18px;
}

/* CALCUL PRO : séparation nette entre le panneau beige (details.proAcc)
   et le bouton "EFFACER TRACÉS" */
[data-submenu="calcul_pro"] .proAcc{
  margin-bottom: 16px;   /* <- c’est CET espace-là qui manquait */
}

[data-submenu="calcul_pro"] .proBottomAction{
  margin-top: 0 !important; /* évite les effets “ça marche / ça marche pas” */
}

/* =========================================================
   UI — Combos (select) : plus larges, alignés à droite
   (s’élargit vers la gauche, ne sort pas du cadre)
   ========================================================= */
[data-submenu="params"] .paramTopPanel label.aspCheck select{
  flex: 0 0 250px !important;
  width: 250px;
  margin-left: auto;
  min-width: 0;
  max-width: calc(100% - 150px);
  box-sizing: border-box;
}

/* Cas particulier : select Maisons (si jamais il n’est pas dans aspCheck selon versions) */
[data-submenu="params"] .paramTopPanel #selHouseSystem{
  width: 250px;
  margin-left: auto;
  max-width: calc(100% - 150px);
  box-sizing: border-box;
}

/* Dans l'accordéon Domification : pleine largeur, annule le margin-left auto */
[data-submenu="params"] .paramOptAcc #selHouseSystem{
  width: 100% !important;
  margin-left: 0 !important;
  max-width: 100% !important;
  flex: none !important;
  display: block !important;
  box-sizing: border-box !important;
}
/* =========================================================
   AFFICHAGE — Harmonisation (corrigé)
   Objectifs :
   - VUE : boutons en 2 colonnes (comme ton besoin initial)
   - ASPECTS : conserve le style PRO
   - Boutons reset dans AFFICHAGE : centrés + plus larges + contour plus marqué
   ========================================================= */

/* 1) Pas de “carte beige” autour des panels Affichage (le #modePanel est déjà une carte blanche) */
[data-submenu="affichage"] .affTabPanel{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* 2) Affichage > VUE : bloc beige + boutons blancs + ✅ grille 2 colonnes */
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="reseau"] .subBtns{
  background: rgba(247,246,242,0.65);
  border: 1px solid #e5e5ee;
  border-radius: 14px;
  padding: 10px;

  /* ✅ 2 colonnes */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Les boutons remplissent leur case (sinon la grille “flotte”) */
[data-submenu="affichage"] .affTabPanel[data-aff-tab="reseau"] .subBtns .viewBtn{
  width: 100%;
}

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


/* 3) Affichage > ASPECTS : “Tout / Majeurs / Mineurs” dans un bloc beige */
/* =========================================================
   AFFICHAGE > ASPECTS : design harmonieux
   - Quick buttons sur fond blanc
   - Grand bloc beige derrière les options
   - 3 cartes blanches (Majeurs / Mineurs / Harmoniques)
   ========================================================= */

/* 1) Quick buttons : fond BLANC (pas de beige derrière) */
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspQuick{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 10px;

  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Les quick buttons restent en pills blanches */
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspQuickBtn{
  background:#fff;
  border:1px solid #e1e4f0;
}

/* 2) Grand bloc beige derrière toutes les options */
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspOptionsWrap{
  background: rgba(247,246,242,0.65);
  border: 1px solid #e5e5ee;
  border-radius: 14px;
  padding: 10px;
}

/* 3) Cartes blanches internes */
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspCard{
  background:#fff;
  border:1px solid rgba(23,40,82,0.10);
  border-radius:14px;
  padding:10px;
  margin-bottom:10px;
}
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspCard:last-child{
  margin-bottom:0;
}

/* Titres des cartes */
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspCardTitle{
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  font-weight:800;
  color:#333;
  margin-bottom:8px;
}

/* Grille checkboxes dans chaque carte */
#modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspCardGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 12px;
}

/* Même chose ici : on garde les deux colonnes sur téléphone. */

/* 4) Container beige pour la liste d’aspects (contient les accordéons blancs) */
[data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspAccWrap{
  background: rgba(247,246,242,0.65);
  border: 1px solid #e5e5ee;
  border-radius: 14px;
  padding: 10px;
}

/* 5) Accordéons blancs */
[data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .affAcc{
  background:#fff;
  border:1px solid rgba(23,40,82,0.10);
  border-radius:14px;
  padding:10px;
  margin:0 0 10px 0;
}
[data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .affAcc:last-child{
  margin-bottom:0;
}

[data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .affAccSum{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
[data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .affAccSum::-webkit-details-marker{ display:none; }

[data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .affAccTitle{
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:0.08em;
  font-weight:800;
  color:#333;
}

/* Indicateur d'ouverture : plus de chevron propre à ce sous-menu. Il est
   dessiné une seule fois pour tout le site, dans le bloc « FLÈCHE
   D'ACCORDÉON » plus haut, où .affAccSum a été ajouté à la liste. */

[data-submenu="affichage"] .affAccBody{ margin-top:10px; }

/* grille interne checkboxes (si utilisée) */
[data-submenu="affichage"] .affAccBody .aspGridInner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 12px;
}
@media (max-width: 520px){
  [data-submenu="affichage"] .affAccBody .aspGridInner{
    grid-template-columns: 1fr;
  }
}

/* 6) ancien .aspGrid (si présent), neutre */
[data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspGrid{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}

/* ✅ 7) Boutons "reset" dans AFFICHAGE : centrés + plus larges + contour PRO */
[data-submenu="affichage"] .aspResetRow{
  justify-content: center;
}

[data-submenu="affichage"] .aspResetBtn{
  width: 100%;
  max-width: 360px;     /* ✅ plus large, comme l’esprit PRO */
  border-width: 2px;    /* ✅ contour plus “PRO” */
}


/* =========================================================
   MAÎTRES (maitrises) — structure demandée
   - Onglets sur fond blanc
   - Beige uniquement derrière : légende + options
   - 2 cartes blanches : légende (2 colonnes) + options (alignées)
   - "Affichage" supprimé
   - Bouton Effacer tout en bas, plein largeur
   ========================================================= */

/* Le sous-menu entier = BLANC (on retire le gros beige) */
[data-submenu="maitrises"]{
  background: transparent;
  border: 0;
  padding: 0;
}

/* Onglets : carte blanche */
[data-submenu="maitrises"] .subBtns{
  background:#fff;
  border:1px solid #e1e4f0;
  border-radius:14px;
  padding:10px;
  margin-bottom:10px;
}

/* Beige uniquement derrière légende + options */
[data-submenu="maitrises"] .maitreBeigeWrap{
  background: rgba(247,246,242,0.65);
  border: 1px solid #e5e5ee;
  border-radius: 14px;
  padding: 10px;
}

/* Cartes blanches internes */
[data-submenu="maitrises"] .maitreCard{
  background:#fff;
  border:1px solid rgba(23,40,82,0.10);
  border-radius:14px;
  padding:12px;
}

/* Espace entre les 2 cartes */
[data-submenu="maitrises"] .maitreLegendCard{
  margin-bottom:10px;
}

/* Légende : 2 colonnes */
[data-submenu="maitrises"] #maitreLegend{
  margin:0;
  padding:0;
  background: transparent; /* la carte blanche est le parent */
  border:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

/* Mobile : repasse en 1 colonne */
@media (max-width: 520px){
  [data-submenu="maitrises"] #maitreLegend{
    grid-template-columns: 1fr;
  }
}

/* Chaque ligne de légende (simple, propre) */
[data-submenu="maitrises"] #maitreLegend .lgRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 4px;
  background: transparent;
  border: 0;
  margin: 0;
}

/* On supprime le titre "Affichage" (le JS le met souvent en .aspGroupTitle) */
[data-submenu="maitrises"] .maitreBeigeWrap .aspGroupTitle{
  display:none !important;
}

/* Options : alignement texte gauche / checkbox droite */
[data-submenu="maitrises"] .maitreBeigeWrap label.aspCheck{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  /* inverse l'ordre : checkbox à droite */
  flex-direction: row-reverse;

  /* rendu clean */
  padding:8px 10px;
  margin: 0;
}

/* (fallback) si l’input est trop collé */
[data-submenu="maitrises"] .maitreBeigeWrap label.aspCheck input{
  margin-left:12px;
}

/* Bouton "Effacer les maîtres" tout en bas, centré, plein largeur */
[data-submenu="maitrises"] .maitreClearRow{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

[data-submenu="maitrises"] .maitreClearRow #btnClearMaitres{
  width:100%;
  max-width: 360px;
  background:#fff;
  border-width:2px;
}

/* Contenu (légende) en carte blanche */
[data-submenu="maitrises"] #maitreLegend{
  background: #fff;
  border: 1px solid #e1e4f0;
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
}

/* =========================================================
   MAÎTRES — FINAL (structure propre, sans JS à modifier)
   - Onglets sur fond blanc
   - Beige uniquement derrière : légende + options
   - 2 cartes blanches : légende (2 colonnes) + options (alignées)
   - Bouton "EFFACER LES MAÎTRES" tout en bas
   ========================================================= */

#modePanel [data-submenu="maitrises"]{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Onglets : carte blanche */
#modePanel [data-submenu="maitrises"] .subBtns{
  background:#fff;
  border:1px solid #e1e4f0;
  border-radius:14px;
  padding:10px;
  margin-bottom:10px;
}

/* Beige uniquement derrière légende + options */
#modePanel [data-submenu="maitrises"] .maitreBeigeWrap{
  background: rgba(247,246,242,0.65);
  border: 1px solid #e5e5ee;
  border-radius: 14px;
  padding: 10px;
}

/* Cartes blanches internes */
#modePanel [data-submenu="maitrises"] .maitreCard{
  background:#fff;
  border:1px solid rgba(23,40,82,0.10);
  border-radius:14px;
  padding:12px;
}

/* Espace entre légende et options */
#modePanel [data-submenu="maitrises"] .maitreLegendCard{ margin-bottom:10px; }

/* Légende : 2 colonnes */
#modePanel [data-submenu="maitrises"] #maitreLegend{
  margin:0 !important;
  padding:0 !important;
  background: transparent !important;
  border:0 !important;

  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

/* Pas de retour à 1 colonne sur téléphone : la légende des dignités tient
   très bien en deux colonnes, et gagne la moitié de sa hauteur. */

/* Chaque ligne de légende */
#modePanel [data-submenu="maitrises"] #maitreLegend .lgRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 4px;
  background: transparent;
  border: 0;
  margin: 0;
}

/* Options : grille 2 colonnes (texte à gauche / checkbox à droite) */
#modePanel [data-submenu="maitrises"] #maitreDisplayOptions .twGrid2col{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  align-items:center;
}

/* Assure l’alignement à droite des inputs */
#modePanel [data-submenu="maitrises"] #maitreDisplayOptions .twChkEnd,
#modePanel [data-submenu="maitrises"] #maitreDisplayOptions .twInpEnd{
  justify-self:end;
}

/* Si un titre "Affichage" existe (ancienne version JS), on le cache */
#modePanel [data-submenu="maitrises"] #maitreDisplayOptions .twH800Mb10{
  display:none !important;
}

/* Bouton bas : centré, plus large, contour PRO */
#modePanel [data-submenu="maitrises"] .maitreClearRow{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

#modePanel [data-submenu="maitrises"] .maitreClearRow #btnClearMaitres{
  width:100%;
  max-width:360px;
  background:#fff;
  border-width:2px;
}
..cityHelpRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
}

.cityHelpText{
  font-size:12px;
  opacity:.75;
  line-height:1.25;
}

.cityInfoLink{
  /* on force un rendu "lien", même si un style global des <button> existe */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;

  cursor: pointer;
  font-size: 12px;
  color: #2563EB;              /* bleu lisible */
  text-decoration: underline;  /* souligné par défaut */
  opacity: .95;
  white-space: nowrap;

  appearance: none;
  -webkit-appearance: none;
}

.cityInfoLink:hover{ opacity: 1; }
.cityInfoLink:focus-visible{
  outline: 2px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}



.cityInfoDlg{
  border: 0;
  border-radius: 14px;
  padding: 0;
  width: min(520px, 92vw);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}
.cityInfoDlg::backdrop{
  background: rgba(0,0,0,0.28);
}

.cityInfoHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.cityInfoTitle{ font-weight: 700; font-size: 14px; }
.cityInfoClose{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  opacity: .7;
}
.cityInfoClose:hover{ opacity: 1; }

.cityInfoBody{ padding: 14px 16px 16px; }
.cityInfoRow{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 13px;
}
.cityInfoRow .k{ opacity: .72; }
.cityInfoRow .v{ text-align:right; }

.cityInfoMiniBtn{
  margin-left: 10px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: transparent;
  cursor:pointer;
  opacity:.85;
}
.cityInfoMiniBtn:hover{ opacity: 1; }

.cityInfoNote{
  margin-top: 10px;
  font-size: 12px;
  opacity: .75;
  line-height: 1.35;
}
.cityInfoError{
  margin-top: 10px;
  font-size: 12px;
  color: #b00020;
}
.cityHelpRow{
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fieldHint{
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.3;
}

/* Mobile : la phrase passe au-dessus si besoin */
@media (max-width: 520px){
  .cityHelpRow{
    flex-direction: column;
    align-items: flex-start;
  }
}
.cityInfoCredit{
  margin-top: 10px;
  font-size: 12px;
  opacity: .70;
  line-height: 1.35;
}

/* ===============================
   CLÉ D'ISHTAR (#ciBox)
   Même pattern que #karmaBox
   =============================== */

#ciBox{
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2)));
  margin: 16px auto 0 auto;
  background:#fff;
  padding: 18px 22px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
  box-sizing: border-box;
}
#ciBox summary{ list-style:none; }
#ciBox summary::-webkit-details-marker{ display:none; }

#ciBox .domWrap > summary{
  cursor:pointer;
  user-select: text; -webkit-user-select: text;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:4px 0;
}
/* Glyphe de la Clé d'Ishtar — même caractère ("M") et même couleur (#96049C)
   que partout ailleurs sur le site (cf. theme_wheel.js, table des glyphes). */
#ciBox .ciGlyphTitle{
  font-family: Astraema;
  color: #96049C;
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -0.12em;
}
/* Glyphes des Nœuds — mêmes caractères et couleurs que sur la roue
   (theme_wheel.js) : Nœud Sud = "6" en #204D89, Nœud Nord = "5" en #787DEE. */
#lifeMissionBox .nsGlyph{
  font-family: Astraema;
  color: #204D89;
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -0.12em;
}
#lifeMissionBox .nnGlyph{
  font-family: Astraema;
  color: #787DEE;
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -0.12em;
}
#ciBox .domMini{
  font-size:12px;
  color:#666;
  font-weight:400;
}

/* Bouton d'export JSON de l'analyse — admin uniquement.
   Poussé à droite de la barre du séparateur, volontairement discret
   pour ne pas concurrencer le titre. */
/* Ligne d'export, en fin de partie technique : le bouton se range à droite,
   séparé du contenu par un filet léger. */
#ciBox .ciExportRow,
#lifeMissionBox .ciExportRow{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #eee;
}
#ciBox .ciExportBtn,
#lifeMissionBox .ciExportBtn{
  flex:0 0 auto;
  font-size:11px;
  font-weight:600;
  color:#96049C;
  background:#faf5fc;
  border:1px solid #96049C;
  border-radius:4px;
  padding:2px 8px;
  cursor:pointer;
  line-height:1.6;
  white-space:nowrap;
}
#ciBox .ciExportBtn:hover,
#lifeMissionBox .ciExportBtn:hover{
  background:#96049C;
  color:#fff;
}
/* Pendant la génération le script remplace le libellé par « … » : en mode
   icône ce « … » ne se voit pas, donc on montre l'attente par la pâleur. */
#ciBox .ciExportBtn:disabled,
#lifeMissionBox .ciExportBtn:disabled{
  opacity:.45;
  cursor:default;
}

#ciBox .domSignature{
  padding:10px 0 4px 0;
}

/* ── Garde-fou de l'heure de naissance ──────────────────────────────
   Deux degrés, un seul habillage, pour qu'on les reconnaisse comme la
   même famille de message :
     .ciGarde          → heure inconnue : le résultat est remplacé.
     .ciGarde.ciGardeDouce → heure ronde : le résultat reste, on prévient.
   La couleur reprend celle des messages « non calculable » déjà utilisés
   ailleurs dans la page (.domWarn), pour ne pas inventer un code de plus.

   Pas de préfixe #ciBox : les quatre pages de roue (natal, progressé,
   synastrie, transit) chargent toutes theme.css, et le même message doit
   pouvoir s'afficher sur chacune. Une seule écriture, quatre pages. */
.ciGarde{
  padding:14px 16px;
  margin-bottom:10px;
  border-radius:14px;
  background:rgba(148,54,29,0.06);
  border:1px solid rgba(148,54,29,0.20);
  border-left:3px solid #94361D;
  color:rgba(0,0,0,0.80);
  font-size:14px;
  line-height:1.55;
}
.ciGarde p{ margin:0 0 10px 0; }
.ciGarde p:last-child{ margin-bottom:0; }

.ciGardeTitre{
  font-weight:700;
  color:#94361D;
}

/* La piste concrète : sur papier clair, pour qu'elle ressorte du reste. */
.ciGardeCherche{
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.65);
}

/* Heure ronde : même forme, ton nettement plus léger — c'est un rappel,
   pas un refus. */
.ciGarde.ciGardeDouce{
  background:rgba(148,54,29,0.035);
  border-color:rgba(148,54,29,0.14);
  border-left-color:rgba(148,54,29,0.45);
  font-size:13px;
}

/* Position CI — ligne compacte */
.ciPosition{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:8px 12px;
  margin-bottom:10px;
  background:#faf5fc;
  border-radius:8px;
  border-left:3px solid #96049C;
}
.ciLabel{
  font-weight:700;
  font-size:14px;
  color:#96049C;
  min-width:24px;
}
.ciValue{
  font-weight:600;
  font-size:14px;
  color:#1a1a1a;
}
.ciSep{
  color:#bbb;
  font-size:13px;
}
.ciConj{
  font-size:12px;
  color:#96049C;
  font-weight:600;
  margin-left:4px;
  padding:1px 6px;
  background:#f0e6f6;
  border-radius:10px;
}
.ciConj .ciR{
  color:#FF0000;
  font-size:10px;
}
.ciConjOrb{
  font-weight:400;
  font-size:10px;
  color:#888;
}

/* Aspects CI — même rendu que les accordéons d'aspects */
#ciBox .domSigItem{ border-top:1px solid #eee; padding-top:8px; }
#ciBox .domSigSum{
  cursor:pointer;
  padding:4px 0;
}
#ciBox .domSigKV{ display:flex; justify-content:space-between; align-items:center; }
#ciBox .domSigKV .k{ font-weight:600; font-size:13px; color:#333; }
#ciBox .domSigKV .v{ font-size:12px; color:#888; }
#ciBox .domSigBody{ padding:4px 0 2px 0; }

/* ===============================
   MISSION DE VIE (#lifeMissionBox)
   Même chrome que #ciBox juste au-dessus, à la demande de Lylise
   (garder le layout de la CI). Le panneau interne réutilise les
   classes génériques ciAnalyse/ciRow/ciPosition — rien à dupliquer là.
   =============================== */

#lifeMissionBox{
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2)));
  margin: 16px auto 0 auto;
  background:#fff;
  padding: 18px 22px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
  box-sizing: border-box;
}
#lifeMissionBox summary{ list-style:none; }
#lifeMissionBox summary::-webkit-details-marker{ display:none; }

#lifeMissionBox .domWrap > summary{
  cursor:pointer;
  user-select: text; -webkit-user-select: text;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:4px 0;
}
#lifeMissionBox .domMini{
  font-size:12px;
  color:#666;
  font-weight:400;
}
#lifeMissionBox .domSignature{
  padding:10px 0 4px 0;
}
#lifeMissionBox .domSigItem{ border-top:1px solid #eee; padding-top:8px; }
#lifeMissionBox .domSigSum{
  cursor:pointer;
  padding:4px 0;
}
#lifeMissionBox .domSigKV{ display:flex; justify-content:space-between; align-items:center; }
#lifeMissionBox .domSigKV .k{ font-weight:600; font-size:13px; color:#333; }
#lifeMissionBox .domSigKV .v{ font-size:12px; color:#888; }
#lifeMissionBox .domSigBody{ padding:4px 0 2px 0; }

/* ===============================
   MISSION D'ÂME ET MISSION DE VIE — contenu public inséré
   DANS les accordéons déjà existants (#ciBox et #lifeMissionBox), pas dans
   une carte à part : "Clé d'Ishtar" et "Mission de vie" restent les seuls
   séparateurs, avec leur position toujours visible (donne envie, montre
   l'outil) et ce texte public juste après — l'analyse Admin détaillée
   reste plus bas dans le même accordéon, gatée séparément.
   =============================== */

#ciBox .pmInline, #lifeMissionBox .pmInline{
  margin: 10px 0 14px 0;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
#ciBox .pmInline .pmPlacement, #lifeMissionBox .pmInline .pmPlacement{
  font-weight:700;
  font-size:15px;
  color:#1a1a1a;
  margin:0 0 10px 0;
  padding:8px 12px;
  border-radius:10px;
  background: rgba(247,246,242,0.78);
}
/* Texte justifié dans les deux missions (mission d'âme et mission de vie),
   sur ordinateur comme sur téléphone : ce sont les seuls séparateurs qui
   contiennent de vrais paragraphes rédigés, et le bord droit en escalier
   se voyait. La césure automatique évite les grands trous entre les mots
   sur les écrans étroits. */
#ciBox .pmInline p, #lifeMissionBox .pmInline p{
  font-size:14.5px;
  line-height:1.6;
  color:#333;
  margin:0 0 10px 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
#ciBox .pmInline .pmQuestion, #lifeMissionBox .pmInline .pmQuestion{
  font-style:italic;
  color:#555;
  margin-top:12px;
}

/* +info graine — même principe visuel que le panneau CI, en plus doux.

   Dans la TEXT BOX du mode Analyse (#analysisBox), il n'y a plus de
   bascule « + En savoir plus » : le texte détaillé y est affiché
   d'emblée. On y demande une analyse, elle doit être complète — un
   deuxième clic pour lire la suite n'a pas de sens à cet endroit.
   Le séparateur, lui, garde sa bascule : là-bas le texte long est un
   approfondissement facultatif.
   Seule l'ALLURE du bloc est donc partagée avec #analysisBox, pas le
   mécanisme d'ouverture. */
#ciBox .pmInline .pmToggleChk, #lifeMissionBox .pmInline .pmToggleChk{ display:none; }
#ciBox .pmInline .pmInfoBtn, #lifeMissionBox .pmInline .pmInfoBtn{
  display:inline-block;
  font-size:13px;
  color:#96049C;
  cursor:pointer;
  text-decoration:underline;
  margin: 2px 0 10px 0;
}
#ciBox .pmInline .pmSeedInfo, #lifeMissionBox .pmInline .pmSeedInfo,
#analysisBox .pmInline .pmSeedInfo{
  display:none;
  position: relative;
  overflow: hidden;
  padding:12px 14px;
  border-radius:12px;
  background: rgba(247,246,242,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 12px;
}
#ciBox .pmInline .pmSeedInfo h4, #lifeMissionBox .pmInline .pmSeedInfo h4,
#analysisBox .pmInline .pmSeedInfo h4{
  position: relative;
  z-index: 1;
  margin:0 0 8px 0;
  font-size:14px;
  color:#1a1a1a;
}
#ciBox .pmInline .pmSeedInfo p,
#analysisBox .pmInline .pmSeedInfo p{ position: relative; z-index: 1; }
/* Glyphe de la Clé d'Ishtar en filigrane, derrière le texte du "+ en savoir plus" */
#ciBox .pmInline .pmSeedInfo::before,
#analysisBox .pmInline .pmSeedInfo::before{
  content: "M";
  font-family: Astraema;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 300px;
  line-height: 1;
  color: #96049C;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
#ciBox .pmInline .pmToggleChk:checked ~ .pmSeedInfo,
#lifeMissionBox .pmInline .pmToggleChk:checked ~ .pmSeedInfo{ display:block; }

/* Text box du mode Analyse : le texte détaillé est visible tout de suite,
   sans rien à cliquer. */
#analysisBox .pmInline .pmSeedInfo{ display:block; }

.ciAspList{
  list-style:none;
  margin:0;
  padding:0;
}
.ciAspLine{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 0;
  border-bottom:1px solid #f0f0f0;
  font-size:13px;
  line-height:1.6;
}
.ciAspLine:last-child{ border-bottom:none; }
.ciAspLine.aspMinor{ opacity:.65; }
.ciAspLine .aspDot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.ciAspLine .aspLabel{
  font-weight:600;
  min-width:85px;
}
.ciAspLine strong{
  color:#1a1a1a;
}
.ciAspLine .aspRetroTag{
  color:#FF0000;
  font-weight:700;
  font-size:inherit;
}
.ciAspLine .aspIntTag{
  color:#FF8C00;
  font-weight:700;
  font-size:inherit;
}
.ciAspOrb{
  font-size:11px;
  color:#888;
  margin-left:4px;   /* tout à la suite du nom, plus poussé à droite */
}

#ciBox .domLine{
  font-size:13px;
  color:#333;
  padding:2px 0;
}

/* ===============================
   KARMAS LUNAIRES (#karmaBox)
   Même pattern que #energySynthBox
   =============================== */

#karmaBox{
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2)));
  margin: 16px auto 0 auto;
  background:#fff;
  padding: 18px 22px;
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  border: var(--cardBorder);
  box-sizing:border-box;
  font-family: inherit;

  --dom-ink: #15151a;
  --dom-muted: rgba(0,0,0,0.62);
  --dom-paper: rgba(247,246,242,0.78);
}

#karmaBox summary{ list-style:none; }
#karmaBox summary::-webkit-details-marker{ display:none; }

/* En-tête global */
#karmaBox .domWrap > summary{
  cursor:pointer;
  user-select: text; -webkit-user-select: text;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  flex-wrap:wrap;
  padding: 6px 2px 12px 2px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Police du titre : voir le bloc commun « EN-TÊTES DES SÉPARATEURS ». */
#karmaBox .domTitle{
  line-height:1.2;
}

#karmaBox .domMini{
  font-size: 12.5px;
  color: var(--dom-muted);
  line-height: 1.35;
  font-weight: 400;

  flex: 1 1 100%;
  max-width: 100%;
  margin-top: 6px;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  text-align: justify;
  hyphens: auto;
}

#karmaBox .domSignature{
  margin-top: 8px;
  display:grid;
  gap: 4px;
}

#karmaBox .domSigItem{
  border-top: 1px dashed rgba(0,0,0,0.10);
  padding: 0;
  margin: 0;
}

#karmaBox .domSigSum{
  cursor: pointer;
  display:block;
  padding: 6px 0;
}
#karmaBox .domSigSum::-webkit-details-marker{ display:none; }

#karmaBox .domSigSum{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#karmaBox .domSigKV{ display:block; }

#karmaBox .domSigKV .k{
  font-weight: 650;
  color: rgba(0,0,0,0.70);
  white-space: nowrap;
}

#karmaBox .domSigKV .v{
  font-weight: 650;
  color: #94361D;
  white-space: nowrap;
}

#karmaBox .domSigBody{
  padding: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dom-ink);
}

#karmaBox .domLine{
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(0,0,0,0.78);
}

#karmaBox .domExplain{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--dom-paper);
  border: 1px solid rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.80);
}

#karmaBox .domWarn{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(148,54,29,0.06);
  border: 1px solid rgba(148,54,29,0.20);
  color: #94361D;
  font-weight: 650;
}

/* Code karma en gras + couleur accent */
#karmaBox .karmaCode{
  font-weight: 800;
  color: #172852;
  font-size: 13px;
  letter-spacing: .04em;
}

/* Sections internes des cartes karma */
#karmaBox .karmaSection{
  margin-top: 8px;
}

#karmaBox .karmaSectionTitle{
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(0,0,0,0.50);
  margin-bottom: 2px;
}

/* Tag régent/aspect en bas de chaque carte */
#karmaBox .karmaRegentTag{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,0.40);
  font-style: italic;
}

/* Carte vide */
#karmaBox .karmaEmpty .domSigSum{
  opacity: .55;
}

/* La mise en page de l'en-tête (titre à gauche, ⇵ à droite, détail en
   dessous) est traitée pour tous les séparateurs d'un seul coup dans le
   bloc « EN-TÊTES DES SÉPARATEURS ». L'ancien réglage responsive propre
   aux Karmas passait le titre en colonne : combiné à l'alignement
   centré, c'est lui qui centrait « Karmas lunaires » sur téléphone. Il
   est supprimé. */
#karmaBox details.domWrap > summary .domMini strong{
  color: var(--txt, #111);
  opacity: 1;
}
/* ===============================
   DÉBLOCAGE RÉTROGRADES (progressé)
   =============================== */
.retroUnlockBox{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(23,40,82,0.12);
}
.retroUnlockBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(23,40,82,0.18);
  background: #fff;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: #172852;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.retroUnlockBtn:hover{
  background: rgba(23,40,82,0.05);
  border-color: rgba(23,40,82,0.35);
}
.retroUnlockBtn:disabled{
  opacity: 0.55;
  cursor: wait;
}
.retroUnlockResult{
  margin-top: 8px;
}
.retroUnlockAge{
  font-size: 13.5px;
  font-weight: 650;
  color: #172852;
  line-height: 1.45;
}
.retroUnlockHint{
  font-weight: 400;
  font-size: 12px;
  opacity: 0.6;
}
.retroUnlockNone{
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  font-style: italic;
}
.retroUnlockError{
  font-size: 13px;
  color: #b00020;
}

/* ===============================
   ROUE — Barre d'outils + Plein écran
   On ne touche PAS à #wheelCard ni #wheelBox.
   =============================== */

/* ── Toolbar : aligné à droite dans #wheelCard, AVANT #wheelBox ── */
#wheelToolbar{
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: -8px -8px 0 0;  /* compense le padding du card, colle en haut à droite */
}

/* Bouton outil générique */
.whlTool{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(23,40,82,0.15);
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  color: #172852;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.whlTool:hover{
  background: rgba(23,40,82,0.07);
  border-color: rgba(23,40,82,0.30);
}
.whlTool:active{
  transform: scale(0.93);
}
.whlTool svg{
  pointer-events: none;
}


/* ===============================
   FULLSCREEN OVERLAY
   =============================== */
.whlFS{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.whlFS.hidden{
  display: none !important;
}

/* Toolbar dans le fullscreen */
.whlFS-toolbar{
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.whlFS-toolbar .whlTool{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(23,40,82,0.20);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.whlFS-toolbar .whlTool:hover{
  background: rgba(23,40,82,0.06);
  border-color: rgba(23,40,82,0.35);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* Canvas : le SVG cloné */
.whlFS-canvas{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.whlFS-canvas svg,
.whlFS-canvas img{
  max-width: min(90vw, 90vh);
  max-height: min(90vw, 90vh);
  width: auto;
  height: auto;
  transform: none !important;   /* retire le scale(0.95) de la roue normale */
}

/* Titre (nom/date/lieu) repris au-dessus de la roue en plein écran
   (pages à trois roues : le titre est un <div> HTML hors du SVG). */
.whlFS-canvas{ flex-direction: column; }
.whlFS-title{
  font-family: Merriweather, serif;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 10px;
}
.whlFS-title .wt-line{ display:block; color:#1e1e1e; }
.whlFS-title .wt-line-1{ font-size: 22px; font-weight: 900; }
.whlFS-title .wt-line-2,
.whlFS-title .wt-line-3{ font-size: 15px; font-weight: 600; color:#444; }


/* ===============================
   PRINT (depuis fullscreen)
   =============================== */
@media print{
  /* On masque tout sauf le fullscreen quand il est actif */
  body > *:not(.whlFS){
    display: none !important;
  }
  .whlFS{
    position: static;
    background: #fff;
  }
  .whlFS-toolbar{
    display: none !important;
  }
  .whlFS-canvas{
    padding: 0;
  }
  .whlFS-canvas svg{
    max-width: 100%;
    max-height: 100%;
  }
}
/* ============================
   Bouton "Paramètres appliqués" (modeBar)
   ============================ */
.appliedParamsBtn{
  padding: 4px 0;
  border: none;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: #2563EB;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.appliedParamsBtn:hover{
  color: #1d4ed8;
}

/* ============================
   Popup "Paramètres appliqués"
   ============================ */
.appliedParamsOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.appliedParamsPopup{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
}
.appliedParamsHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.appliedParamsTitle{
  font-size: 16px;
  font-weight: 900;
  color: #172852;
}
.appliedParamsClose{
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  padding: 4px 8px;
  border-radius: 8px;
}
.appliedParamsClose:hover{
  background: #f0f0f0;
  color: #333;
}
.appliedParamsSubtitle{
  font-size: 12.5px;
  color: #666;
  margin-bottom: 4px;
}
.appliedParamsPriority{
  font-size: 11.5px;
  color: #888;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}
.appliedParamsPriority strong{
  color: #2563EB;
}

/* Sections dans la popup */
.apSection{
  margin-bottom: 14px;
}
.apSectionTitle{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: #172852;
  margin-bottom: 6px;
}
.apRow{
  display: flex;
  align-items: baseline;
  font-size: 12.5px;
  padding: 3px 0;
  gap: 8px;
}
.apRow .apLabel{
  color: #333;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.apRow .apValue{
  color: #555;
  min-width: 80px;
  text-align: center;
  flex-shrink: 0;
}
.apRow .apSource{
  font-size: 11px;
  color: #999;
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}
.apOrbGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  font-size: 12px;
  margin-top: 4px;
}
.apOrbGrid .apOrbItem{
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.apOrbGrid .apOrbItem .apOrbName{ color: #333; }
.apOrbGrid .apOrbItem .apOrbVal{ color: #666; font-weight: 600; }

/* Actions popup */
.appliedParamsActions{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  text-align: center;
}
.appliedParamsHint{
  font-size: 11px;
  color: #888;
  margin-top: 6px;
}
.appliedParamsLink{
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #2563EB;
  font-weight: 600;
  text-decoration: none;
}
.appliedParamsLink:hover{
  text-decoration: underline;
}

/* ============================
   Accordéons Orbes (Paramètres Pro)
   ============================ */
.orbAccordion{
  border: 1px solid #e5e5ee;
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .15s;
}
.orbAccordion[open]{
  border-color: #e5e5ee;
}
.orbAccordion > .orbAccSum{
  list-style: none;
  padding: 10px 12px;
  cursor: pointer;
  user-select: text; -webkit-user-select: text;
  background: #fafafa;
}
.orbAccordion > .orbAccSum::-webkit-details-marker{ display: none; }
.orbAccordion[open] > .orbAccSum{
  background: #f0f4ff;
  border-bottom: 1px solid #e5e5ee;
}
.orbAccTitle{
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
}
.orbAccBody{
  padding: 12px;
}
.orbAccHelp{
  font-size: 11px;
  color: #888;
  font-style: italic;
  padding: 8px 12px 2px;
  line-height: 1.4;
}

/* Lignes éditables dans les accordéons */
.orbEditRow{
  display: flex;
  align-items: center;
  padding: 4px 0;
  gap: 6px;
  font-size: 12.5px;
}
.orbEditRow .orbEditLabel{
  color: #333;
  font-weight: 600;
  flex: 1;
  min-width: 80px;
}
.orbEditRow .orbEditInput{
  width: 70px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 12px;
  text-align: right;
  font-weight: 600;
  flex-shrink: 0;
  -moz-appearance: textfield;
}
/* Hide stepper arrows */
.orbEditRow .orbEditInput::-webkit-inner-spin-button,
.orbEditRow .orbEditInput::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.orbEditRow .orbEditInput:focus{
  border-color: #2563EB;
  outline: none;
}
.orbEditRow .orbEditDefault{
  font-size: 10px;
  color: #aaa;
  min-width: 28px;
  flex-shrink: 0;
}
.orbCoefNeutral{
  font-size: 11px;
  color: #888;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 4px 0;
}
.orbGroupTitle{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: #172852;
  margin-top: 10px;
  margin-bottom: 4px;
}
.orbGroupTitle:first-child{
  margin-top: 0;
}
.orbCINote{
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-top: 10px;
  padding: 8px 10px;
  background: #f9f9f5;
  border-radius: 8px;
  border: 1px solid #e8e8e0;
  line-height: 1.4;
}

/* ✅ Global fix: number inputs - space between text and stepper arrows */
input[type="number"]{
  padding-right: 20px;
}

/* ✅ Bouton "Appliquer orbes" dans l'accordéon */
.btnApplyOrbs{
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #2563EB;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.btnApplyOrbs:hover:not(:disabled){
  background: #1d4ed8;
}
.btnApplyOrbs:disabled{
  background: #ccc;
  color: #888;
  cursor: default;
}

/* ===============================
   DRAWER HISTORIQUE — Mobile (≤ 768px)
   =============================== */

/* En mobile : masquer la colonne latérale et passer le topGrid en 1 colonne */
@media (max-width: 768px) {
  #formBox .topGrid {
    grid-template-columns: 1fr;
  }
  #sideBox {
    display: none; /* sera déplacé dans le drawer */
    border-left: none;
    padding-left: 0;
  }
}

/* Bouton d'accès à l'historique (injecté en JS, visible uniquement en mobile) */
#histDrawerBtn {
  display: none;
}
@media (max-width: 768px) {
  #histDrawerBtn {
    display: inline-flex;
    align-items: center;
    /* Le bouton est posé PAR LE JAVASCRIPT à l'intérieur du <form>, et le
       formulaire est une grille. Il devenait donc une case de cette
       grille, étirée sur toute la largeur de sa colonne : la pastille
       faisait 158 px alors que le mot n'en occupe que 68, et
       « Historique » se retrouvait collé à gauche, avec 73 px de vide à
       droite. C'est ce que tu voyais comme un texte décentré.
       justify-self: start lui rend sa largeur naturelle : la pastille
       épouse le mot, comme tous les autres boutons du formulaire. */
    justify-self: start;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #e1e4f0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #172852;
    cursor: pointer;
    margin-top: 14px;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 4px rgba(23,40,82,0.08);
    transition: background 0.15s;
  }
  #histDrawerBtn:hover {
    background: #f3f5fb;
  }
}

/* Overlay semi-transparent */
#histDrawerOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.38);
  z-index: 900;
  opacity: 0;
  transition: opacity 0.22s ease;
}
#histDrawerOverlay.hist-open {
  display: block;
  opacity: 1;
}

/* Drawer — bottom sheet */
#histDrawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 32px rgba(23,40,82,0.14);
  padding: 0 0 env(safe-area-inset-bottom, 0);
  max-height: 75vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
#histDrawer.hist-open {
  transform: translateY(0);
}

/* Header du drawer */
#histDrawerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e5e5ee;
  flex-shrink: 0;
}
#histDrawerHeader h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #172852;
}
#histDrawerClose {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.12s;
}
#histDrawerClose:hover { background: #f3f5fb; }

/* Corps scrollable du drawer */
#histDrawerBody {
  overflow-y: auto;
  flex: 1;
  padding: 16px 20px 24px;
  overscroll-behavior: contain;
}

/* Dans le drawer : #sideBox redevient visible et sans bordure gauche */
#histDrawer #sideBox {
  display: block !important;
  border-left: none;
  padding-left: 0;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #histDrawer, #histDrawerOverlay {
    transition: none;
  }
}



/* ===============================
   MOBILE (≤ 768px) — Layout + Résumé + Roue
   =============================== */

@media (max-width: 768px) {

  /* 1) Supprimer les marges latérales de page — les panneaux prennent toute la largeur */
  :root {
    --pagePad: 12px;
  }

  /* Bloquer tout débordement horizontal */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Formbox : réduire le padding interne aussi */
  #formBox {
    padding: 18px 14px;
  }

  /* 2) Résumé : passer en 1 colonne */
  .summaryGrid {
    grid-template-columns: 1fr;
  }

  /* 3) La roue, en VRAIE taille au lieu d'un agrandissement en trompe-l'œil
     Avant : le SVG mesurait 299 px et un transform:scale(1.14) le
     grossissait visuellement — mais un scale ne change pas la place
     réservée : la roue débordait de sa carte et se faisait couper par
     overflow:hidden. On voyait plus gros, et rognné.

     Après : on rend l'air de la carte à la roue (26 px de marge → 8 px),
     et on retire le scale. Le SVG mesure alors ~335 px POUR DE VRAI :
     rien n'est coupé, et les glyphes grossissent avec lui puisqu'ils sont
     dessinés dans le repère du SVG.

     overflow:hidden reste, en filet : si un objet sortait malgré tout du
     cadre, il serait rogné plutôt que de faire déborder toute la page. */
  /* Sélecteur `body #wheelCard` et `!important` : transit.css,
     progresse.css et synastrie.css sont chargés APRÈS theme.css et
     imposent `width:100% !important` + 26 px de marge intérieure. Leurs
     roues restaient donc petites et enfermées dans la carte, alors que
     le natal passait en pleine largeur. Ce sélecteur plus fort applique
     le même traitement aux quatre roues. */
  body #wheelCard {
    overflow: hidden;
    padding: 4px;

    /* La roue est carrée : sa taille est bornée par la LARGEUR de l'écran.
       Tant qu'elle reste dans la colonne de contenu, elle perd les 12 px de
       marge de chaque côté. On la sort donc de la colonne pour qu'elle
       occupe toute la largeur du téléphone. C'est le seul moyen de la faire
       réellement grandir — le reste de la page ne bouge pas. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw !important;
    border-radius: 0;
  }
  #svg {
    transform: none;
  }

  /* Parts arabes affichées : elles se dessinent plus loin que les planètes.
     On rend de la marge à la roue pour qu'elles tiennent dans le cadre —
     elle revient alors à peu près à la taille qu'elle avait avant.
     La classe est posée par theme_wheel.js. */
  body.astraPartsArabes #svg {
    width: min(91%, var(--wheelPx));
  }

  /* 4) Masquer le texte nom/date/lieu sur la roue */
  #themeMeta {
    display: none !important;
  }
}

/* ===============================
   MOBILE (≤ 768px) — Modes, Dominantes, Positions
   =============================== */

@media (max-width: 768px) {

  /* 1) Boutons Modes : voir la bande défilante en fin de fichier.
        (l'ancienne grille 2 colonnes est supprimée : elle empilait les
         6 modes sur 3 rangées et repoussait la roue très bas) */
  .modeBtn, .viewBtn {
    text-align: center;
    justify-content: center;
  }

  /* 2) Dominantes — badges ne débordent plus */
  #dominantesBox .domPillGroup {
    flex-direction: column;
    align-items: flex-start;
  }
  #dominantesBox .domPill {
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
    box-sizing: border-box;
  }
  /* Boîte beige aide : max-width + overflow contenu */
  #dominantesBox .domExplain {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  #dominantesBox .domExplain p,
  #dominantesBox .domExplain span,
  #dominantesBox .domExplain div {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  /* 3) Positions — aspects forts : 1 colonne */
  #positions .posStrongList {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   MOBILE (≤ 768px) — Dominantes, EnergySynth, titres + badges
   =============================== */

@media (max-width: 768px) {

  /* Titre résumé (domSigSum) : autoriser le retour à la ligne */
  #dominantesBox .domSigSum,
  #energySynthBox .domSigSum,
  #karmaBox .domSigSum {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Badge passe sous le titre : domLineRow en colonne */
  #dominantesBox .domLineRow,
  #energySynthBox .domLineRow,
  #karmaBox .domLineRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Les valeurs (rouge) : peuvent passer à la ligne */
  #dominantesBox .domSigKV .v,
  #dominantesBox .domSigKV .k,
  #energySynthBox .domSigKV .v,
  #energySynthBox .domSigKV .k,
  #karmaBox .domSigKV .v,
  #karmaBox .domSigKV .k {
    white-space: normal !important;
  }

  /* Boîtes beige aide : pleine largeur, texte contenu */
  #dominantesBox .domExplain,
  #energySynthBox .domExplain,
  #karmaBox .domExplain {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }
  #dominantesBox .domExplain *,
  #energySynthBox .domExplain *,
  #karmaBox .domExplain * {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  /* dominantesBox et energySynthBox eux-mêmes : pleine largeur */
  #dominantesBox,
  #energySynthBox,
  #karmaBox,
  #ciBox {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

/* ===============================
   iPad Pro / tablette large (≤ 1100px) — Roue + menu côte à côte → empilement
   =============================== */

@media (max-width: 1100px) {
  #wheelArea {
    grid-template-columns: 1fr;
  }
  #sidePanel {
    max-width: none;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   DÉTECTION DE FIGURES ASTROLOGIQUES — styles natal
   (copie des règles de synastrie.css nécessaires au moteur)
   ══════════════════════════════════════════════════════════════ */

/* ── Carte principale #synFigures ── */
#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;
}
#synFigures > details.sectionAcc{
  margin: 0; background: none; padding: 28px;
  border-radius: 0; box-shadow: none; border: none;
}
/* Mise en page et police : voir le bloc commun « EN-TÊTES DES SÉPARATEURS ».
   Ici, seulement ce qui est propre aux Figures : le trait sous l'en-tête. */
#synFigures details.sectionAcc > summary.sectionSum{
  cursor: pointer; user-select: text; -webkit-user-select: text; 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 figures ── */
.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);
}
.figSum{
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 8px; cursor: pointer; user-select: text; -webkit-user-select: text; list-style: none;
  padding: 10px 14px; font-size: 14px; font-weight: 700; color: #172852;
}
.figSum::-webkit-details-marker{ display: none; }
.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); }
.figBody{ padding: 4px 14px 12px 14px; }
.figSum .sumSpacer{ flex: 1 1 auto; }

/* ── Icône info ⓘ dans les titres d'accordéons (GT / Étoiles de David) ── */
.figInfoBtn{
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: #6C3FA0; padding: 0 2px;
  opacity: 0.65; transition: opacity .15s ease;
}
.figInfoBtn:hover{ opacity: 1; }

/* ── Badge compteur ── */
.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;
}

/* ── Sections Grands Trigones par élément ── */
.gtElemBadge{
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 700; color: #fff;
}
.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; }
.gtSigBadge{ font-size: 9px; color: #999; font-family: monospace; letter-spacing: 0.04em; }

/* ── Score trigone ── */
.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; }
.gtMixedBadge{
  font-size: 8px; font-weight: 800; color: #fff; background: #7B3F9E;
  border-radius: 6px; padding: 1px 6px; letter-spacing: 0.03em; vertical-align: middle;
}

/* ── Popup zoom figure ── */
.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; }
.gtNone{ font-size: 12px; color: #888; font-style: italic; padding: 6px 0; }
.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; }
.gtPopCard.figPopWide{ max-width: 520px; }
.gtPopCard.figPopWide .gtPopSvg svg{ max-width: 100%; width: 100%; }

/* ── Cartes figures classiques ── */
.figureCard{
  border: 1px solid #e5e5ee; border-radius: 10px; padding: 10px 12px;
  background: rgba(247,246,242,0.55); margin-bottom: 10px;
}
.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; }
.figInterBadge{
  font-size: 9px; font-weight: 700; color: #fff; background: #94361D;
  border-radius: 5px; padding: 1px 6px;
}
.figIntraBadge{
  font-size: 9px; font-weight: 700; color: #888; background: #eee;
  border-radius: 5px; padding: 1px 6px;
}
.figCardContent{ display: flex; align-items: flex-start; gap: 12px; }
.figCardSvg{ flex-shrink: 0; }
.figCardSvg svg{ display: block; border-radius: 8px; }
.figureBody{ font-size: 11.5px; line-height: 1.7; color: #333; flex: 1; min-width: 0; }
.figOrbRow{ font-size: 10px; margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; }
.figNone{ font-size: 12px; color: #888; font-style: italic; padding: 6px 0; }
.tcarreDiagram{ flex: 0 0 auto; cursor: pointer; }
.tcarreDiagram:hover{ opacity: 0.8; }
.figDiagram{ flex: 0 0 auto; cursor: pointer; }
.figDiagram:hover{ opacity: 0.8; }

/* ── 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+ ── */
.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; }
/* ===============================
   CI — panneau d'analyse (mission d'âme)
   Sobre, beige, aligné. Non scopé : sert au natal ET au progressé.
   =============================== */
.ciAnalyse{
  --dom-paper: rgba(247,246,242,0.78);
  --dom-ink:#15151a;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--dom-paper);              /* beige de la charte */
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--cardRadius);
  color: var(--dom-ink);
}
.ciAnalyse__head{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; margin-bottom:10px; }
.ciAnalyse__tag{ font-size:.8em; opacity:.5; font-weight:400; }

/* Une ligne = étiquette à gauche (colonne fixe) + valeur à droite */
.ciRow{ display:grid; grid-template-columns: 190px 1fr; gap:12px; padding:8px 0; border-top:1px solid rgba(0,0,0,0.05); }
.ciRow:first-of-type{ border-top:0; }
.ciRow__k{ color:rgba(0,0,0,0.5); font-size:.92em; }
.ciRow__v{ color:var(--dom-ink); }
.ciRow__v > div{ padding:1px 0; }
.ciRow__note{ opacity:.6; }

.ciAnalyse__notes{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(0,0,0,0.06); font-size:.86em; opacity:.7; }
.ciAnalyse__ver{ margin-top:4px; font-style:italic; opacity:.85; }

/* Bouton « + info » + panneau descriptif de la graine (pur CSS) */
.ciInfoBtn{ display:inline-block; margin-left:8px; cursor:pointer; user-select:none; font-size:.8em; padding:1px 9px; border-radius:999px; border:1px solid rgba(0,0,0,0.15); color:rgba(0,0,0,0.6); background:rgba(255,255,255,0.5); }
.ciInfoBtn:hover{ background:#fff; color:var(--dom-ink); }
.ciGraineChk:checked ~ .ciRow .ciInfoBtn{ background:#fff; color:var(--dom-ink); }
.ciGraine{ display:none; }
.ciGraineChk:checked ~ .ciGraine{ display:block; }
.ciGraine{ margin-top:12px; padding:12px 14px; background:rgba(255,255,255,0.45); border:1px solid rgba(0,0,0,0.06); border-radius:var(--cardRadius); }
.ciGraine__titre{ font-weight:600; margin-bottom:8px; }
.ciGraine__part{ padding:6px 0; }
.ciGraine__part + .ciGraine__part{ border-top:1px solid rgba(0,0,0,0.05); }
.ciGraine__lbl{ display:block; font-size:.82em; color:rgba(0,0,0,0.5); text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; }
.ciGraine__part p{ margin:0; line-height:1.55; }

/* Sur petit écran : l'étiquette passe au-dessus de la valeur */
@media (max-width:560px){
  .ciRow{ grid-template-columns:1fr; gap:2px; }
  .ciRow__k{ font-weight:600; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — ces deux blocs ne s'appliquent QUE sous 768 px.
   Rien ne change sur ordinateur.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px){

  /* ── 1) Les boutons du formulaire natal, en deux colonnes ────────────
     Avant : Nettoyer, Enregistrer et Note s'empilaient à gauche pendant
     que Calculer restait seul à droite.

     Après :   Nettoyer                Enregistrer
               Note                       Calculer

     Colonne de gauche alignée à gauche, colonne de droite alignée à
     droite. Les boutons gardent leur taille : ce sont les colonnes qui
     les placent, pas un étirement.

     display:contents fait disparaître la boîte .actionsLeft de la mise en
     page : ses trois boutons deviennent des cases de la grille, sans
     toucher au HTML.

     Le :has(> .actionsLeft) limite la règle au formulaire natal — la page
     transit a aussi des .formActions, mais pas la même composition.

     Cas particuliers, gérés sans règle supplémentaire grâce à
     grid-column:2 sur Calculer :
       visiteur non connecté (Nettoyer + Calculer) → une seule ligne ;
       thème pas encore enregistré (pas de Note)   → Calculer sous
                                                     Enregistrer. */
  #formBox form .formActions:has(> .actionsLeft){
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    align-items: center;
  }
  #formBox form .formActions > .actionsLeft{ display: contents; }

  #formBox form .formActions .btnClear{ order: 1; justify-self: start; }
  #formBox form .formActions .btnSave { order: 2; justify-self: end;   }
  #formBox form .formActions .btnNote { order: 3; justify-self: start; }
  #formBox form .formActions .btnCalc {
    order: 4;
    grid-column: 2;      /* Calculer reste toujours dans la colonne droite */
    justify-self: end;
    margin-left: 0;      /* annule le margin-left:auto du bureau */
  }


  /* ── 1 bis) La même chose pour transit / progressé / synastrie ───────
     Ces trois pages ont leur propre ligne de boutons (.progCalcRow) :
       Nettoyer   Reset      puis      Calculer
     Chacune avait jusqu'ici sa propre recette mobile — l'une empilait
     tout sur trois lignes, l'autre étirait Calculer sur toute la
     largeur : trois pages, trois allures différentes, et aucune ne
     ressemblait au thème natal.

     On applique donc ici, une seule fois pour les trois, la MÊME grille
     à deux colonnes que le natal juste au-dessus :

         Nettoyer                 Reset
                               Calculer

     .progCalcLeft disparaît de la mise en page (display:contents) pour
     que ses boutons deviennent des cases de la grille — le HTML n'est
     pas touché.

     Anneaux 2 et 3, qui n'ont que Nettoyer et Calculer : grid-column:2
     sur Calculer suffit, les deux tiennent sur une seule ligne. */
  #formBox form .progCalcRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    align-items: center;
  }
  #formBox form .progCalcRow > .progCalcLeft{ display: contents; }

  #formBox form .progCalcRow .btnClean{ order: 1; justify-self: start; }
  #formBox form .progCalcRow .btnReset{ order: 2; justify-self: end;   }
  #formBox form .progCalcRow .btnCalc {
    order: 3;
    grid-column: 2;      /* Calculer reste toujours dans la colonne droite */
    justify-self: end;
    margin-left: 0;      /* annule le margin-left:auto du bureau */
  }


  /* ── 2) La barre de modes, en une bande qui défile ───────────────────
     Avant : 6 modes sur 3 rangées de 2, plus la ligne « MODES » — la
     barre faisait 162 px de haut et repoussait la roue très bas.

     Après : une seule ligne, qu'on fait glisser du doigt. Les boutons
     gardent leur largeur naturelle et ne se coupent pas.

     Le mot « MODES » est masqué : il prenait toute une ligne pour dire ce
     que les boutons disent déjà. Pour le remettre, supprimer la ligne
     .modeTitle ci-dessous.

     theme.css est chargée par les QUATRE pages à roue : cette règle vaut
     donc pour le natal, le transit, le progressé et la synastrie. */
  #modeBar{
    padding: 10px 12px;
    gap: 10px;
  }
  #modeBar .modeLeft{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;           /* Firefox : pas de barre visible */
    -ms-overflow-style: none;
  }
  #modeBar .modeLeft::-webkit-scrollbar{ display: none; }

  /* Un chevron, pour dire clairement qu'il y a une suite.
     Le dégradé qu'il y avait ici se lisait comme une salissure sur
     l'écran. Un chevron ne se confond avec rien.

     Il est "sticky" : c'est un élément de la rangée, mais il reste collé
     au bord droit pendant qu'on fait glisser les boutons dessous. Arrivé
     au bout, il se range naturellement après le dernier bouton.

     La pastille blanche et son ombre l'empêchent de se confondre avec le
     bouton qui passe derrière. Aucun JavaScript. */
  #modeBar .modeLeft::after{
    content: "›";
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    align-self: center;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px #e1e4f0, -8px 0 12px 4px rgba(255,255,255,0.95);
    color: #172852;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 2px;   /* recentre le chevron dans la pastille */
    pointer-events: none;  /* purement décoratif : ne bloque pas le doigt */
  }

  #modeBar .modeTitle{ display: none; }

  /* « Paramètres appliqués » passe à la ligne sous les modes : on le
     pousse contre le bord droit au lieu de le laisser à gauche. */
  #modeBar #btnAppliedParams{
    margin-left: auto;
  }

  #modeBar .modeBtn{
    flex: 0 0 auto;                  /* ne rétrécit pas, ne s'étire pas */
    white-space: nowrap;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — Deux colonnes partout dans les accordéons

   Les listes à cocher — objets et aspects de l'Affichage Pro, aspects de
   l'Affichage normal — étaient déjà en deux colonnes sur ordinateur, mais
   une règle les repassait à une seule colonne sous 520 px. Elle est
   supprimée : sur un téléphone, six lignes de deux valent mieux que douze
   lignes d'une.

   Ici on resserre seulement l'écart entre colonnes et on autorise les
   libellés longs (« Nouvelle Lune PN », « Sesqui-carré ») à revenir à la
   ligne plutôt qu'à déborder de leur colonne.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){

  .proCheckList,
  #modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspCardGrid{
    gap: 8px 10px;
  }

  .proCheckList .aspCheck,
  #modePanel [data-submenu="affichage"] .affTabPanel[data-aff-tab="types"] .aspCardGrid .aspCheck{
    min-width: 0;              /* sans ça, un libellé long élargit sa colonne */
    align-items: flex-start;   /* la case reste en haut si le texte passe à la ligne */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — Les séparateurs sous la roue

   Sur téléphone, tous les blocs sous la roue étaient blancs, avec la même
   bordure et la même ombre que la text box : empilés les uns sous les
   autres, ils se confondaient en une seule colonne indistincte.

   On ne touche ni au fond ni au contenu : le blanc reste le blanc.
   Seul le BORD change — un filet doré Astraema qui détache chaque carte
   de la suivante. La text box (#analysisBox) garde sa bordure grise :
   c'est elle qui doit se distinguer des séparateurs.

   Rien de ce bloc ne s'applique au-dessus de 768 px.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){

  /* ── Les séparateurs restent blancs, cernés d'un filet doré ── */
  /* Ce n'est pas le fond qui sépare, c'est le CONTOUR. Le fond blanc
     d'origine est conservé — donc l'intérieur des blocs ne change pas
     non plus — et c'est un filet doré Astraema (1,5 px) qui dessine le
     bord de chaque carte pour la détacher de la suivante. L'ombre grise
     est remplacée par un halo doré très doux, pour ne pas ternir le
     filet. */
  #positions,
  #dominantesBox,
  #karmaBox,
  #energySynthBox,
  #ciBox,
  #lifeMissionBox,
  #synFigures{
    border: 1.5px solid rgba(212,160,72,.55);
    box-shadow: 0 1px 6px rgba(212,160,72,.14);
  }

  /* Le glyphe de la Clé d'Ishtar quitte le titre du séparateur.
     Dessiné dans la police Astraema, il n'a ni la taille ni la ligne de
     base du texte qui l'entoure : sur une ligne étroite, il déséquilibre
     tout le titre. Le nom « Clé d'Ishtar » suffit à l'identifier ; le
     glyphe reste partout ailleurs, y compris sur la roue. */
  .sectionTitle .ciGlyphTitle,
  .domTitle .ciGlyphTitle{
    display: none;
  }

  /* ── L'intérieur des séparateurs ──────────────────────────────────
     1) Les titres internes ne sont plus tronqués.
     Les sous-titres (« Régente : … », « Gouvernance : … Boucle … »)
     étaient réglés en « une seule ligne, on coupe avec des points de
     suspension ». Sur un écran large c'est élégant, sur un téléphone la
     réponse disparaît. Ici ils passent simplement à la ligne. */
  #dominantesBox .domSigSum,
  #karmaBox .domSigSum,
  #energySynthBox .domSigSum{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  #dominantesBox .domSigKV .k,
  #dominantesBox .domSigKV .v,
  #dominantesBox .domSigKV .domInlineMuted,
  #dominantesBox .domSigSum .domInlineMuted,
  #karmaBox .domSigKV .k,
  #karmaBox .domSigKV .v,
  #energySynthBox .domSigKV .k,
  #energySynthBox .domSigKV .v{
    white-space: normal;
  }

  /* 2) Texte justifié dans les paragraphes rédigés — y compris les
     encarts beiges (.domExplain) qui portent les explications. La césure
     automatique évite les grands trous entre les mots, et
     overflow-wrap protège des mots trop longs pour la colonne. */
  #dominantesBox .domLine,
  #dominantesBox .domMuted,
  #dominantesBox .domExplain,
  #karmaBox .domLine,
  #karmaBox .domMuted,
  #karmaBox .domExplain,
  #karmaBox .domWarn,
  #energySynthBox .domLine,
  #energySynthBox .domMuted,
  #energySynthBox .domExplain,
  #ciBox .domLine,
  #ciBox .domExplain,
  #lifeMissionBox .domLine,
  #lifeMissionBox .domExplain{
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  /* La roue agrandie déborde un peu de sa place réservée : le zoom est
     un agrandissement visuel, il ne pousse pas ce qui suit. On donne donc
     de l'air au-dessus des boutons + et − pour que la roue ne vienne pas
     mordre dessus. Sélecteur `body` : les barres d'outils sont stylées
     dans les gabarits eux-mêmes, chargés après theme.css. */
  body .progWheelToolbar{
    padding-top: 20px;
  }

  /* 3) Figures : le titre garde sa ligne, le choix des vues passe en
     dessous. Les quatre boutons (Classique / Classique + / …) sont
     injectés entre le titre et la ⇵ ; sur téléphone ils écrasaient le
     titre. `order` les envoie sur une deuxième ligne, sans toucher au
     HTML ni à l'ordinateur. */
  #synFigures details.sectionAcc > summary.sectionSum .figFilterToggle{
    /* order 3 : APRÈS le titre (0), la copie (1) et la ⇵ (2). En 1, la
       barre des vues — large de toute la ligne — s'intercalait entre les
       deux boutons et les repoussait sous elle. Ligne 1 : titre, copie,
       ⇵. Ligne 2 : les vues, et rien d'autre. */
    order: 3;
    flex: 0 0 100%;      /* toute la largeur */
    margin-left: 0;
    margin-top: 8px;
  }
  /* Puisque la barre occupe toute la largeur, les boutons se partagent
     la place à parts égales et se séparent par un trait : on obtient un
     vrai sélecteur segmenté, lisible au pouce. */
  #synFigures details.sectionAcc > summary.sectionSum .figFilterBtn{
    flex: 1 1 0;
    font-size: 11px;
    padding: 6px 4px;
  }
  #synFigures details.sectionAcc > summary.sectionSum .figFilterBtn + .figFilterBtn{
    border-left: 1px solid #d0cfe0;
  }

  /* 4) Le bouton d'export JSON devient une icône ─────────────────────
     « ⬇ JSON » mangeait la ligne du titre. Sur téléphone on masque le
     texte (font-size:0) et on le remplace par un glyphe Astraema, dans
     la même couleur violette et le même cadre :
       • mission d'âme  → l'étoile de la Clé d'Ishtar (« M ») ;
       • mission de vie → les deux Nœuds imbriqués, Sud (« 6 ») et
         Nord (« 5 »), légèrement chevauchés.
     Le bouton garde son title, donc son infobulle et son sens. */
  #ciBox .ciExportBtn,
  #lifeMissionBox .ciExportBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;              /* masque « ⬇ JSON » */
    padding: 3px 8px;
    line-height: 1;
    min-height: 24px;
  }
  /* L'étoile de la Clé d'Ishtar est dessinée haut dans sa police : elle
     touchait le bord supérieur du cadre. On la redescend de 10 % de sa
     hauteur pour la recentrer dans le carré. */
  #ciBox .ciExportBtn::before{
    content: "M";
    font-family: Astraema;
    font-size: 16px;
    line-height: 1;
    transform: translateY(10%);
  }
  /* Les deux Nœuds : côte à côte sur la même ligne, séparés — ni empilés
     ni superposés. */
  #lifeMissionBox .ciExportBtn{
    gap: 4px;
  }
  #lifeMissionBox .ciExportBtn::before,
  #lifeMissionBox .ciExportBtn::after{
    font-family: Astraema;
    font-size: 14px;
    line-height: 1;
  }
  #lifeMissionBox .ciExportBtn::before{ content: "5"; }   /* Nœud Nord */
  #lifeMissionBox .ciExportBtn::after{  content: "6"; }   /* Nœud Sud  */

  /* 5) Un peu d'air rendu au contenu ────────────────────────────────
     Les séparateurs gardaient leur marge intérieure d'ordinateur
     (28 px, ou 18/22 px) : sur un écran de 390 px, c'était près de
     15 % de la largeur perdue de chaque côté. On la ramène à 14 px,
     la même pour les sept, ce qui les aligne aussi entre eux. */
  #positions,
  #dominantesBox,
  #karmaBox,
  #energySynthBox,
  #ciBox,
  #lifeMissionBox{
    padding: 18px 14px;
  }
  #synFigures > details.sectionAcc{
    padding: 18px 14px;
  }

  /* 6) Les cartes de figures : le dessin dessus, le texte dessous ────
     Le dessin et son commentaire étaient côte à côte. Le dessin ne se
     réduit pas, donc il ne restait au texte qu'une colonne de quelques
     mots, illisible. Sur téléphone on empile : le dessin prend la
     largeur (plafonné à 300 px et centré), le texte occupe la ligne
     entière en dessous. */
  /* Ces règles sont accrochées à #synFigures : la synastrie redéfinit
     les mêmes classes dans sa propre feuille, chargée après theme.css.
     L'identifiant leur donne le dernier mot, sur les quatre roues. */
  #synFigures .figCardContent{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #synFigures .figCardSvg{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #synFigures .figCardSvg > *{        /* .figDiagram / .tcarreDiagram */
    width: 100%;
    max-width: 300px;
  }
  #synFigures .figCardSvg svg{
    width: 100%;
    height: auto;
  }
  #synFigures .figureBody{
    width: 100%;
    font-size: 12.5px;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* L'en-tête d'une carte (titre + badges + bouton Focus) peut passer
     à la ligne au lieu de déborder. */
  #synFigures .figCardHeader{ flex-wrap: wrap; }
  #synFigures .figCardTitle{ min-width: 0; }

  /* Idem pour l'en-tête des sous-accordéons (Grands Trigones, etc.) */
  #synFigures .figSum{ flex-wrap: wrap; }
}