/* AstroPredict v3 — page d'un signe : le module de la v2 (règle des 30°, trois décans en onglets, quatre jauges). */

.module { padding: clamp(20px, 3vw, 36px); display: grid; gap: 18px; scroll-margin-top: 90px; }
@media (max-width: 860px) { .module { scroll-margin-top: 160px; } }
.module__haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pastille-el { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.pastille-el::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(140deg, rgb(var(--l1)), rgb(var(--l4))); box-shadow: inset 0 0 0 1px rgb(21 33 43 / .1); }
.module__nom { font-family: var(--f-titre); font-weight: 350; font-size: clamp(40px, 4.6vw, 60px); line-height: .95; letter-spacing: -.04em; margin: -4px 0 0; }

/* ----- Règle des 30° ----- */
.regle { position: relative; height: 52px; margin-top: 6px; }
.regle__graduations { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; border-right: 1px solid var(--encre);
  background:
    repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px calc(100% / 3)) bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgb(21 33 43 / .28) 0 1px, transparent 1px calc(100% / 30)) bottom / 100% 6px no-repeat; }
.regle__graduations::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--filet-fort); }
.regle::before { content: ""; position: absolute; bottom: 0; height: 12px; width: calc(100% / 3); left: 0;
  background: linear-gradient(180deg, rgb(var(--l1) / 0), rgb(var(--l1) / .8)); transition: left .4s ease; }
[data-decan="2"] .regle::before { left: calc(100% / 3); }
[data-decan="3"] .regle::before { left: calc(200% / 3); }
.regle__astres { position: absolute; inset: 0 0 12px 0; }
.regle__astre { position: absolute; bottom: 0; left: var(--x); display: grid; justify-items: start; transform: translateX(-1px); }
.regle__astre b { font-family: var(--f-mono); font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--encre); background: #fff; box-shadow: inset 0 0 0 1px var(--filet); border-radius: 999px; padding: 3px 8px; margin-left: -6px; }
.regle__astre i { position: relative; width: 1px; height: 10px; background: var(--encre); margin-top: 2px; }
.regle__astre i::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--abricot); box-shadow: 0 0 0 2px #fff; }
.regle__astre--droite { justify-items: end; transform: translateX(calc(-100% + 1px)); }
.regle__astre--droite b { margin-left: 0; margin-right: -6px; }
.regle__astre--haut i { height: 34px; }
.regle:has(.regle__astre--haut) { height: 76px; }
.regle.a-etage { height: 76px; }
.regle__vide { position: absolute; left: 0; bottom: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--encre-3); }
.regle__degres { display: flex; justify-content: space-between; margin-top: -14px; font-size: 10.5px; }

/* ----- Onglets des décans ----- */
.onglets-decan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: -6px 0 0; }
.onglet-decan { display: grid; gap: 3px; text-align: left; padding: 10px 14px 11px; border-radius: 16px; cursor: pointer; border: 0;
  background: #fff; box-shadow: inset 0 0 0 1px var(--filet); color: var(--encre); transition: background .2s ease, color .2s ease; }
.onglet-decan:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.onglet-decan__n { font-family: var(--f-titre); font-weight: 500; font-size: 16px; letter-spacing: -.015em; line-height: 1.15; }
.onglet-decan__n sup { font-size: .6em; line-height: 0; }
.onglet-decan__dates { font-family: var(--f-mono); font-size: 12px; color: var(--encre-2); white-space: nowrap; }
.onglet-decan__regent { font-size: 13.5px; color: var(--encre-3); }
/* le décan choisi : sans JS, le 1er ; avec JS, celui que porte html[data-decan] (posé dès le <head>, donc sans saut) */
html:not(.js) .onglet-decan[data-n="1"],
.js[data-decan="1"] .onglet-decan[data-n="1"], .js[data-decan="2"] .onglet-decan[data-n="2"], .js[data-decan="3"] .onglet-decan[data-n="3"] {
  background: var(--encre); color: var(--creme); box-shadow: none; }
html:not(.js) .onglet-decan[data-n="1"] span + span,
.js[data-decan="1"] .onglet-decan[data-n="1"] span + span, .js[data-decan="2"] .onglet-decan[data-n="2"] span + span, .js[data-decan="3"] .onglet-decan[data-n="3"] span + span {
  color: rgb(251 246 238 / .8); }

/* ----- Panneau du décan ----- */
.panneau-decan { display: grid; gap: 16px; }
.panneau-decan + .panneau-decan { padding-top: 22px; border-top: 1px solid var(--filet-fort); }
.js .panneau-decan { display: none; padding-top: 0; border-top: 0; }
.js[data-decan="1"] .panneau-decan[data-n="1"], .js[data-decan="2"] .panneau-decan[data-n="2"], .js[data-decan="3"] .panneau-decan[data-n="3"] { display: grid; }
.js .panneau-decan__titre { display: none; }
.panneau-decan__texte { font-size: 16.5px; line-height: 1.55; font-weight: 450; max-width: 46em; }

/* ----- Le ciel commun à tout le signe (écrit par le code) ----- */
.ciel-commun { display: grid; gap: 8px; padding: 14px 18px; border-radius: 18px; background: var(--creme-2); box-shadow: inset 0 0 0 1px var(--filet); }
.ciel-commun[hidden] { display: none; }
.ciel-commun ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.45; color: var(--encre-2); }
.ciel-commun b { color: var(--encre); font-weight: 600; }

/* ----- L'humeur du jour : la Lune ----- */
.humeur { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--filet-fort); }
.humeur[hidden] { display: none; }
.humeur__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.humeur__titre { margin: 0; font-family: var(--f-titre); font-weight: 500; font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.humeur__astre { margin: 0; color: var(--encre-3); }
.humeur__carte { display: grid; gap: 8px; padding: 18px 20px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.humeur__carte > * { margin: 0; }
.humeur__nom { font-family: var(--f-titre); font-weight: 500; font-size: 19px; letter-spacing: -.015em; line-height: 1.2; }
.humeur__etiquette, .cat4 .cat4__pourquoi { font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; line-height: 1.5; color: var(--encre-2);
  padding: 6px 10px; border-radius: 10px; background: var(--creme-2); justify-self: start; }
.humeur__etiquette[hidden], .cat4 .cat4__pourquoi[hidden] { display: none; }
.humeur__texte { font-size: 15.5px; line-height: 1.6; color: var(--encre); max-width: 46em; }

/* ----- Le conseil du jour (de la semaine, du mois) ----- */
.conseil { display: grid; gap: 6px; padding: 16px 20px 18px; border-radius: 18px; background: rgb(255 201 168 / .55); box-shadow: inset 0 0 0 1.5px var(--abricot); }
.conseil > p { margin: 0; }
.conseil__titre { color: var(--encre); font-weight: 500; }
.conseil__texte { font-family: var(--f-titre); font-weight: 400; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; max-width: 40em; }

/* ----- Les quatre prévisions du jour : note + texte, toujours visibles ----- */
.cats4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.cat4 { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.cat4__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cat4__tete .micro { color: var(--encre); font-weight: 500; }
.cat4 b { font-family: var(--f-titre); font-weight: 350; font-size: 22px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cat4 b small { font-size: 12px; font-weight: 400; color: var(--encre-3); letter-spacing: 0; margin-left: 1px; }
.cat4 i { display: block; height: 3px; border-radius: 3px; background: var(--filet); overflow: hidden; }
.cat4 i::after { content: ""; display: block; height: 100%; width: calc(var(--v) * 10%); border-radius: 3px; background: linear-gradient(90deg, rgb(var(--l1)), var(--encre)); }
.cat4 p { font-size: 15px; line-height: 1.55; color: var(--encre-2); }

@media (max-width: 700px) {
  .ciel-commun { padding: 12px 14px; }
  .ciel-commun ul { font-size: 14.5px; }
  .humeur__titre { font-size: 20px; }
  .humeur__carte { padding: 16px 16px 18px; }
  .humeur__texte { font-size: 15px; }
  .conseil__texte { font-size: 17px; }
  .module { padding: 20px 18px 22px; gap: 18px; }
  .module__nom { font-size: 40px; }
  .onglets-decan { gap: 5px; }
  .onglet-decan { padding: 10px 10px 11px; border-radius: 14px; }
  .onglet-decan__n { font-size: 15.5px; }
  .onglet-decan__dates { font-size: 10.5px; letter-spacing: -.02em; }
  .onglet-decan__regent { font-size: 12.5px; }
  .onglet-decan .sans-tel { display: none; }
  .regle__astre b { font-size: 10px; padding: 2px 6px; }
  .cats4 { grid-template-columns: minmax(0, 1fr); }
}
.module__chapo { margin: 6px 0 0; font-size: 16px; }