/* AstroPredict v3 — page « Carte du ciel » : cinq instruments sur une roue, et les quatre lectures (repris de la v2). */

.bloc__titre { margin-bottom: clamp(20px, 3vw, 32px); }

/* ---------- Badges de formule ---------- */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: #fff; color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.badge--previsions { background: #FFE3CF; color: #7A3412; box-shadow: inset 0 0 0 1px #FFC9A8; }
.badge--tout { background: var(--encre); color: var(--creme); box-shadow: none; }

/* ---------- Instruments ---------- */
.instruments { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px; align-items: start; }
.instruments__liste { display: grid; gap: 6px; }
.instrument { position: relative; display: grid; gap: 4px; text-align: left; padding: 14px 18px 15px; border-radius: 20px; border: 0; background: transparent; color: var(--encre); cursor: pointer; font: inherit; transition: background .2s ease, box-shadow .2s ease; }
.instrument:hover { background: rgb(255 255 255 / .5); }
.instrument__nom { font-family: var(--f-titre); font-weight: 450; font-size: clamp(22px, 2vw, 28px); line-height: 1.05; letter-spacing: -.025em; }
.instrument__phrase { font-size: 14.5px; line-height: 1.4; color: var(--encre-2); }
.instrument__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.instrument[aria-selected="true"] { background: #fff; box-shadow: 0 16px 40px -26px rgb(30 45 60 / .45), inset 0 0 0 1px rgb(255 255 255 / .9); }
.instrument[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: linear-gradient(rgb(var(--l1)), var(--encre)); }

.instruments__scene { overflow: hidden; border-radius: 28px; scroll-margin-top: 160px; }
.instruments__barre { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--filet); }
.instruments__nom { color: var(--encre); }
.instruments__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.instruments__roue { display: grid; place-items: center; padding: 18px 14px; border-right: 1px solid var(--filet); }
.instruments__roue svg { width: 100%; max-width: 470px; }
.instruments__fiche { padding: 24px 24px 22px; min-width: 0; }

.fiche { display: grid; gap: 12px; align-content: start; }
.fiche[hidden] { display: none; }
.fiche__titre { font-family: var(--f-titre); font-weight: 420; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.02; letter-spacing: -.03em; }
.fiche__texte { color: var(--encre-2); font-size: 15.5px; }
.fiche__lignes { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--filet-fort); }
.fiche__lignes li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.fiche__lib { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3); }
.fiche__lignes b { font-family: var(--f-titre); font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -.012em; }
.fiche__lignes small { font-family: var(--f-mono); font-size: 11.5px; color: var(--encre-3); }
.fiche__lignes:empty { display: none; }

/* ---------- Schémas (styles communs) ---------- */
.roue, .carre-vedique, .piliers { display: block; width: 100%; height: auto; }
.roue .r-signe { font-family: var(--f-mono); font-size: 8px; letter-spacing: .16em; fill: var(--encre-2); font-weight: 500; }
.roue .r-signe-glyphe { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", serif; fill: var(--encre); }
.roue .r-trait { stroke: var(--encre); stroke-opacity: .32; stroke-width: .8; }
.roue .r-cercle { stroke: var(--encre); stroke-opacity: .5; stroke-width: .9; }
.roue .r-fin { fill: none; stroke: var(--encre); stroke-opacity: .2; stroke-width: .8; }
.roue .r-maison { stroke: var(--encre); stroke-opacity: .28; stroke-width: .8; }
.roue .r-axe { stroke: var(--encre); stroke-width: 1.3; }
.roue .r-num { font-family: var(--f-mono); font-size: 9px; font-weight: 600; fill: var(--encre-2); }
.roue .r-anneau-maisons { fill: #fff; fill-opacity: .7; stroke: none; }
.roue .r-angle { font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; fill: var(--encre); }
.roue .r-asp-doux { stroke: #2E8F6E; stroke-opacity: .55; stroke-width: 1; }
.roue .r-asp-dur { stroke: var(--braise); stroke-opacity: .5; stroke-width: 1; }
.roue .r-repere { stroke: var(--encre); stroke-width: 1; }
.roue .r-astre circle { fill: #fff; stroke: var(--encre); stroke-width: 1; }
.roue .r-astre text { font-family: var(--f-mono); font-size: 7.6px; font-weight: 600; letter-spacing: .02em; fill: var(--encre); }
.roue .r-deg { font-family: var(--f-mono); font-size: 7px; fill: var(--encre-2); }
.roue .r-dispo { fill: none; stroke: var(--encre); stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 2 4; }
.roue .r-centre { fill: var(--encre); }
.roue .r-noeud { stroke: var(--encre); stroke-width: 1.2; }
.roue .r-noeud--nn { fill: #9CCBF2; }
.roue .r-noeud--ns { fill: #FFC9A8; }
.roue .r-etiq { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; fill: var(--encre); }
.roue .r-etiq2 { font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; fill: var(--encre-2); }
.roue .r-tr circle { fill: var(--encre); stroke: #fff; stroke-width: 1.4; }
.roue .r-tr text { font-family: var(--f-mono); font-size: 7.4px; font-weight: 600; fill: var(--creme); }
.roue .r-tr-lien { stroke: var(--encre); stroke-opacity: .35; stroke-width: .8; }
.roue .r-tr--b circle { fill: #FFC9A8; stroke: var(--encre); stroke-width: 1; }
.roue .r-tr--b text { fill: var(--encre); }
.roue .r-tr--arc circle { fill: #9CCBF2; stroke: var(--encre); stroke-width: 1; }
.roue .r-tr--arc text { fill: var(--encre); }
.roue .r-tr--rev circle { fill: #FFE3CF; stroke: var(--braise); stroke-width: 1.2; }
.roue .r-tr--rev text { fill: var(--braise); }
.roue .r-tr-asp { stroke-dasharray: 3 3; stroke-width: 1.3; }
.roue .r-tr-asp--doux { stroke: #2E8F6E; }
.roue .r-tr-asp--dur { stroke: var(--braise); }
.carre-vedique .v-fond { fill: rgb(255 255 255 / .55); stroke: var(--encre); stroke-width: 1.2; }
.carre-vedique .v-lagna { fill: rgb(var(--l4) / .7); stroke: none; }
.carre-vedique .v-trait { fill: none; stroke: var(--encre); stroke-width: 1; }
.carre-vedique .v-num { font-family: var(--f-mono); font-size: 10px; fill: var(--encre-3); }
.carre-vedique .v-pl { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; fill: var(--encre); letter-spacing: .02em; }
.carre-vedique .v-as { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .14em; fill: var(--braise); font-weight: 600; }
.carre-vedique .v-pied { font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; fill: var(--encre-2); }
.piliers .b-tete { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; fill: var(--encre-2); }
.piliers .b-carte { fill: rgb(255 255 255 / .62); stroke: var(--encre); stroke-opacity: .5; stroke-width: 1; }
.piliers .b-carte--maitre { fill: rgb(var(--l4) / .75); stroke-opacity: 1; stroke-width: 1.3; }
.piliers .b-han { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 44px; fill: var(--encre); }
.piliers .b-leg { font-family: var(--f-mono); font-size: 8.4px; letter-spacing: .08em; fill: var(--encre-2); }
.piliers .b-maitre { font-family: var(--f-mono); font-size: 8.4px; letter-spacing: .12em; fill: var(--braise); font-weight: 600; }
.piliers .b-rail { fill: rgb(21 33 43 / .1); }
.piliers .b-val { font-family: var(--f-titre); font-size: 26px; font-weight: 250; fill: var(--encre); letter-spacing: -.03em; }
.piliers .b-pied { font-family: var(--f-mono); font-size: 8.6px; letter-spacing: .06em; fill: var(--encre-2); }

/* ---------- Quatre lectures ---------- */
.trads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trad { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.trad::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1; background: linear-gradient(90deg, var(--a), var(--b)); }
.trad--occ { --a: #FFB98C; --b: #A9D5F4; }
.trad--ved { --a: #FFAC70; --b: #F4D29C; }
.trad--chi { --a: #A2E1CB; --b: #9DD0F2; }
.trad--karma { --a: #E8C792; --b: #9FD8C2; }
.trad__dessin { display: grid; place-items: center; height: clamp(230px, 20vw, 290px); padding: 14px; border-bottom: 1px solid var(--filet); }
.trad__dessin svg { width: 100%; height: 100%; }
.trad__texte { display: grid; gap: 12px; align-content: start; padding: 18px 20px 22px; }
.trad__tete { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-titre); font-weight: 480; font-size: 24px; line-height: 1; letter-spacing: -.02em; }
.trad__tete svg { width: 24px; height: 24px; flex: none; }
.trad__phrase { font-size: 15px; line-height: 1.45; color: var(--encre-2); }
.trad__chez { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgb(21 33 43 / .04); font-weight: 600; font-size: 14.5px; }
.trad__libres { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.trad__libres li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.35; }
.trad__libres svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #CFEFDF; color: #1F6B50; }
.trad__plus { font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-3); }

@media (max-width: 1100px) { .trads { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trad__dessin { height: 320px; } }
@media (max-width: 900px) {
  .instruments { grid-template-columns: minmax(0, 1fr); }
  .instruments__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrument { background: rgb(255 255 255 / .45); padding: 12px 14px 13px; }
  .instrument:last-child { grid-column: 1 / -1; }
  .instrument__phrase { display: none; }
  .instrument[aria-selected="true"]::before { display: none; }
  .instrument[aria-selected="true"] { background: var(--encre); color: var(--creme); }
  .instruments__grille { grid-template-columns: minmax(0, 1fr); }
  .instruments__roue { border-right: 0; border-bottom: 1px solid var(--filet); padding: 12px 8px; }
  .instruments__fiche { padding: 18px 18px 20px; }
}
@media (max-width: 640px) {
  .trads { grid-template-columns: minmax(0, 1fr); }
  .trad__dessin { height: auto; }
  .trad__dessin svg { height: auto; max-height: 340px; }
  .instrument__nom { font-size: 20px; }
  .instruments__barre { padding: 12px 16px; }
  .instruments__scene { border-radius: 22px; }
}

/* glyphes des planètes (police à symboles du système, variante texte) */
.roue .r-glyphe { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", serif; font-size: 17px; fill: var(--encre); }
.roue .r-fond-glyphe { fill: #fff; stroke: var(--encre); stroke-opacity: .25; stroke-width: .8; }
.roue .r-tr text.r-tr-glyphe { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", serif; font-size: 12px; font-weight: 400; }

/* ---------- Total des outils de Zodiac Intelligence, sous les cinq instruments : le nombre, une phrase, le bouton vers la liste ---------- */
.outils { margin-top: 20px; padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 38px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px clamp(24px, 4vw, 48px); align-items: center; }
.outils__nombre { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.outils__nombre b { font-family: var(--f-titre); font-weight: 300; font-size: clamp(60px, 6.4vw, 88px); line-height: .9; letter-spacing: -.045em; color: var(--braise); }
.outils__nombre span { font-family: var(--f-titre); font-weight: 450; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.025em; }
.outils__phrase { margin: 0; font-family: var(--f-titre); font-weight: 450; font-size: clamp(20px, 2vw, 27px); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
@media (max-width: 860px) {
  .outils { grid-template-columns: minmax(0, 1fr); }
  .outils__bouton { width: 100%; }
}