/* Voix Lactée — la nuit bleue et l'or, une touche de crépuscule.
   Pensé d'abord pour le téléphone et pour un public de 45 ans et plus : grands caractères, gros boutons, contrastes forts. */

@font-face { font-family: 'Marcellus'; src: url('../fonts/marcellus-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --nuit: #0e1634;
  --nuit-2: #162250;
  --nuit-3: #1c2a5c;
  --trait: #2c3a72;
  --trait-fort: #46558f;
  --or: #e6c27a;
  --creme: #f4ecdb;
  --brume: #d3d7ea;
  --brume-2: #aab2d3;
  --rose: #f0b2a8;
  --f-titre: 'Marcellus', Georgia, 'Times New Roman', serif;
  --f-texte: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --f-glyphes: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Apple Symbols', 'DejaVu Sans', sans-serif;
  --onglets: 72px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nuit); color: var(--creme); font-family: var(--f-texte); font-size: 21px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--or); }
a:hover { color: var(--creme); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
h1:focus, h1:focus-visible { outline: none; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 400; margin: 0; text-wrap: balance; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 7vw, 3.8rem); }
p { margin: 0; }

.conteneur { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
main { position: relative; z-index: 1; }
body { padding-bottom: calc(var(--onglets) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body { padding-bottom: 0; } .conteneur { padding-inline: 32px; } }

.surtitre { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.titre-section { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.chapo { color: var(--brume); max-width: 36em; }
.note { font-size: 16px; color: var(--brume-2); }
.or { color: var(--or); }
.rose { color: var(--rose); }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--or); color: var(--nuit); }
.bouton:hover { background: #efd193; color: var(--nuit); }
.bouton.discret { background: none; color: var(--creme); border: 2px solid var(--trait-fort); font-weight: 400; }
.bouton.discret:hover { border-color: var(--or); color: var(--or); }
.badge { display: inline-block; align-self: start; justify-self: start; padding: 4px 12px; border-radius: 999px; background: rgba(230, 194, 122, .16); border: 1px solid var(--or); color: var(--or); font-size: 14px; font-weight: 700; letter-spacing: .04em; }

/* Ciel étoilé */
.etoiles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.etoiles span { position: absolute; border-radius: 50%; background: var(--creme); animation: scintille 4s ease-in-out infinite; }
@keyframes scintille { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .etoiles span { animation: none; } }

/* En-tête */
.entete { position: relative; z-index: 2; }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: calc(18px + env(safe-area-inset-top, 0px)) 18px; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--or); text-decoration: none; font-family: var(--f-titre); font-size: 28px; }
/* Dans le sens où les bras traînent, comme une galaxie. Durée et angle de départ sont posés par le serveur
   (DureeTour dans MainLayout) : l'angle suit l'heure, sans saut d'une page à l'autre. */
.marque-spirale { flex: none; animation: spirale 80s linear infinite; }
@keyframes spirale { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .marque-spirale { animation: none; } }
.nav-haut { display: none; gap: 30px; font-size: 20px; }
.nav-haut a { display: inline-flex; align-items: center; gap: 8px; color: var(--creme); text-decoration: none; padding-block: 8px; border-bottom: 2px solid transparent; }
.nav-haut svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; opacity: .85; }
.nav-haut a.active, .nav-haut a:hover { color: var(--or); border-bottom-color: var(--or); }

/* Onglets en bas (téléphone) */
.onglets { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(14, 22, 52, .96); border-top: 1px solid var(--trait); backdrop-filter: blur(8px); }
.onglets a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--onglets); color: var(--brume-2); text-decoration: none; font-size: 14px; }
.onglets svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.onglets a.active { color: var(--or); }
.onglets a.active svg { fill: rgba(230, 194, 122, .18); }
@media (min-width: 900px) { .nav-haut { display: flex; } .onglets { display: none; } }

/* Pied de page */
.pied { position: relative; z-index: 1; margin-top: 48px; border-top: 1px solid var(--trait); background: linear-gradient(180deg, rgba(22, 34, 80, .55), rgba(14, 22, 52, 0) 60%); }
.pied-haut { display: grid; gap: 32px; padding-block: 40px 28px; }
@media (min-width: 900px) { .pied-haut { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 48px; } }
.pied-marque { display: grid; gap: 14px; align-content: start; }
.pied-devise { font-family: var(--f-titre); font-size: 24px; color: var(--or); }
.pied-reseaux { display: flex; flex-wrap: wrap; gap: 10px; }
.pied-reseaux a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--trait-fort); color: var(--creme); }
.pied-reseaux a:hover { border-color: var(--or); color: var(--or); }
.pied-reseaux svg { width: 22px; height: 22px; fill: currentColor; }
.pied-reseaux svg .trait { fill: none; stroke: currentColor; stroke-width: 1.6; }
.pied-colonne { display: grid; gap: 10px; align-content: start; }
.pied-colonne h2 { font-size: 15px; font-family: var(--f-texte); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brume-2); }
.pied-colonne a { color: var(--creme); text-decoration: none; font-size: 19px; padding-block: 4px; }
.pied-colonne a:hover { color: var(--or); }
.pied-facons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--brume); font-size: 17px; line-height: 1.45; }
.pied-facons li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.pied-facons li::before { content: '✦'; color: var(--or); font-size: 12px; line-height: 2; }
.pied-alerte { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 20px; border-radius: 18px; border: 1px solid rgba(230, 194, 122, .45); background: rgba(230, 194, 122, .06); color: var(--creme); font-size: 18px; }
.pied-alerte svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pied-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-block: 22px 32px; font-size: 15px; color: var(--brume-2); }
.pied-bas a { color: var(--brume); padding-block: 6px; }
.pied-avis { flex-basis: 100%; }
@media (min-width: 900px) { .pied-avis { flex-basis: auto; margin-left: auto; } }

/* Blocs */
.bloc { display: grid; gap: 24px; padding-block: 40px; }
.bloc.premier { padding-top: 12px; }
.entete-section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.lien-suite { font-weight: 700; padding-block: 8px; }

/* Tête du jour */
.tete-jour { display: grid; gap: 20px; padding-block: 12px 8px; }
.tete-jour-texte { display: grid; gap: 14px; }
.ciel-intro { display: grid; gap: 8px; color: var(--brume); font-size: 21px; max-width: 38em; }
.ciel-intro .nombre { color: var(--brume-2); font-size: 18px; }
.puce-lune { justify-self: start; display: inline-flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border-radius: 999px; background: var(--nuit-2); border: 1px solid var(--trait-fort); color: var(--creme); text-decoration: none; font-size: 17px; line-height: 1.3; }
.puce-lune em { font-style: normal; color: var(--or); }
@media (min-width: 900px) { .tete-jour { grid-template-columns: 1fr auto; align-items: end; } }

/* Vedettes */
.vedettes { display: grid; gap: 18px; }
@media (min-width: 760px) { .vedettes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vedette { position: relative; display: flex; align-items: flex-end; min-height: 440px; border-radius: 24px; overflow: hidden; color: var(--creme); text-decoration: none; border: 1.5px solid var(--or); }
.vedette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vedette::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 52, 0) 30%, rgba(14, 22, 52, .95) 75%); }
.vedette-texte { position: relative; z-index: 1; display: grid; gap: 8px; padding: 24px; }
.vedette-texte strong { font-family: var(--f-titre); font-weight: 400; font-size: 36px; }
.vedette-texte > span:not(.badge) { color: var(--brume); }
.lire { color: var(--or) !important; font-weight: 700; }

/* Grille des 12 signes */
.signes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .signes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .signes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.signe { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--nuit-2); border: 1px solid var(--trait); color: var(--creme); text-decoration: none; }
.signe:hover { border-color: var(--or); color: var(--creme); }
.signe img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 60%; }
.signe-texte { display: grid; gap: 4px; padding: 14px 16px 16px; }
.signe-texte strong { font-family: var(--f-titre); font-weight: 400; font-size: 26px; }
.periode { font-size: 15px; color: var(--brume-2); }
.signes.mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 760px) { .signes.mini { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.signes.mini .signe-texte strong { font-size: 19px; }

/* Geste du jour */
.geste { display: grid; gap: 10px; padding: 26px 24px; border-radius: 24px; background: var(--nuit-2); border: 1px solid var(--trait-fort); font-size: 22px; }
.geste .envoi { font-family: var(--f-titre); color: var(--or); font-size: 21px; }

/* Fiche d'un signe */
.fiche { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.fiche h1 { font-size: clamp(3.2rem, 11vw, 5rem); }
.fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fiche-suite { display: grid; gap: 28px; max-width: 820px; padding-block: 8px 24px; }
.fiche-date { color: var(--brume-2); font-size: 18px; }
.fiche-message { display: grid; gap: 14px; font-size: 24px; line-height: 1.55; }
.fiche-ciel { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--trait); color: var(--brume); }
.fiche-ciel h2 { font-size: 28px; color: var(--creme); }
.fiche-voisins { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 8px; }

/* Le ciel */
.ciel { display: grid; gap: 28px; }
@media (min-width: 980px) { .ciel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.ciel-3d { position: relative; aspect-ratio: 1 / 0.92; display: grid; place-items: center; border-radius: 26px; background: radial-gradient(ellipse at center, #1b2a5e 0%, var(--nuit) 72%); overflow: hidden; }
.ciel-3d .roue { width: min(360px, 88%); height: auto; }
.ciel-3d canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.ciel-infos { display: grid; gap: 18px; }
.carte-lune { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 20px; background: var(--nuit-2); border: 1px solid var(--trait); }
.carte-lune svg { flex: none; }
.carte-lune-texte { display: grid; gap: 2px; min-width: 0; color: var(--brume); font-size: 18px; }
.carte-lune-texte strong { font-family: var(--f-titre); font-weight: 400; font-size: 26px; color: var(--creme); }
.astres { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.astres li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--trait); }
.astres-glyphe { font-family: var(--f-glyphes); font-size: 24px; }
.astres-pos { color: var(--brume); text-align: right; }
.astres-retro { grid-column: 2 / -1; color: var(--rose); font-size: 16px; }
@media (min-width: 640px) { .astres li { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.2fr) auto; } .astres-pos { text-align: left; } .astres-retro { grid-column: auto; text-align: right; } }

/* Rendez-vous */
.rdv-grille { display: grid; gap: 18px; }
@media (min-width: 760px) { .rdv-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rdv { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-radius: 20px; overflow: hidden; background: var(--nuit-2); border: 1px solid var(--trait); }
.rdv img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.rdv-texte { display: grid; gap: 4px; align-content: center; padding: 16px 18px; }
.rdv-quand { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or); }
.rdv h3 { font-size: 24px; }
.rdv p { color: var(--brume); font-size: 17px; }
@media (min-width: 760px) { .rdv { grid-template-columns: 1fr; } .rdv img { height: 220px; } }

/* Calendrier */
.mois { display: grid; gap: 8px; }
.mois h2 { font-size: 30px; color: var(--or); padding-top: 12px; }
.calendrier { list-style: none; margin: 0; padding: 0; }
.calendrier li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--trait); }
.cal-icone { grid-row: span 2; display: grid; place-items: center; }
.cal-glyphe { font-family: var(--f-glyphes); font-size: 24px; color: var(--or); }
.cal-date { font-size: 16px; color: var(--brume-2); }
.cal-titre { font-size: 20px; }


/* Menu : le thème en or */
.nav-haut a.nav-theme { color: var(--or); }

/* Pied : les réseaux */
.pied-reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.pied-reseaux a { color: var(--creme); padding-block: 8px; }

/* Invitation vers le thème */
.appel-theme { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border-radius: 24px; background: linear-gradient(135deg, #1d2b62, var(--nuit-2)); border: 1.5px solid var(--or); color: var(--creme); text-decoration: none; }
.appel-theme:hover { color: var(--creme); box-shadow: 0 0 28px rgba(230, 194, 122, .18); }
.appel-theme img { width: 110px; height: 150px; object-fit: cover; border-radius: 55px 55px 12px 12px; }
.appel-texte { display: grid; gap: 6px; }
.appel-texte strong { font-family: var(--f-titre); font-weight: 400; font-size: 24px; line-height: 1.2; }
.appel-texte > span:not(.surtitre) { color: var(--brume); font-size: 18px; }
@media (min-width: 760px) { .appel-theme { grid-template-columns: 150px minmax(0, 1fr); padding: 18px 28px 18px 18px; } .appel-theme img { width: 150px; height: 200px; border-radius: 75px 75px 14px 14px; } .appel-texte strong { font-size: 30px; } }

/* Page du thème */
.formules { display: grid; gap: 18px; }
@media (min-width: 900px) { .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.formule { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--nuit-2); border: 1px solid var(--trait-fort); color: var(--creme); text-decoration: none; }
a.formule:hover { border-color: var(--or); color: var(--creme); }
.formule.vedette-formule { border: 2px solid var(--or); }
.formule img { width: 100%; height: 200px; object-fit: cover; object-position: center 55%; }
.formule-texte { display: grid; gap: 8px; padding: 20px 22px 24px; }
.formule-nom { font-family: var(--f-titre); font-weight: 400; font-size: 30px; }
.formule-type { color: var(--or); font-weight: 700; font-size: 17px; }
.formule-liste { display: grid; gap: 6px; margin-top: 4px; color: var(--brume); font-size: 18px; }
.formule-liste span::before { content: '✦ '; color: var(--or); font-size: 13px; }
.exemple { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .exemple { grid-template-columns: 360px minmax(0, 1fr); } .exemple-lune { grid-column: 2; } }
.exemple-roue .roue { width: min(340px, 100%); margin-inline: auto; display: block; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trio-astre { display: grid; gap: 8px; text-align: center; font-size: 17px; line-height: 1.3; }
.trio-astre img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 60%; border-radius: 999px 999px 14px 14px; border: 1px solid var(--trait-fort); }
.exemple-lune { display: flex; align-items: center; gap: 14px; color: var(--brume); font-size: 18px; }
.exemple-lune svg { flex: none; }
.etapes { margin: 0; padding-left: 1.4em; display: grid; gap: 14px; color: var(--brume); max-width: 46em; }
.etapes strong { color: var(--creme); }
.etapes li::marker { color: var(--or); font-family: var(--f-titre); }
.engagements, .ouverture { display: grid; gap: 14px; padding: 26px 24px; border-radius: 24px; background: var(--nuit-2); border: 1px solid var(--trait-fort); }
.engagements h2, .ouverture h2 { font-size: 30px; }
.engagements ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--brume); }
.ouverture { border-color: var(--or); text-align: center; justify-items: center; }
.ouverture p { color: var(--brume); }

/* Illustration fondue dans la nuit, derrière le haut de page (comme les écrans de commande) */
[hidden] { display: none !important; }
.incruste { position: relative; isolation: isolate; }
.incruste::before { content: ''; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 560px; background: var(--fond) center 35% / cover no-repeat; opacity: .42;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, .55) 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, .55) 50%, transparent 100%); }
@media (min-width: 900px) {
  .incruste::before { left: auto; right: 0; width: 58%; height: 640px; opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 35%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 70% at 70% 35%, #000 25%, transparent 75%); }
}
.tete-incrustee { display: grid; gap: 16px; padding-block: 120px 28px; max-width: 900px; margin-inline: 0; }
@media (min-width: 900px) { .tete-incrustee { padding-top: 56px; margin-inline: auto; max-width: 1180px; } .tete-incrustee > * { max-width: 760px; } }
.tete-incrustee .bloc, .tete-incrustee.bloc { padding-top: 120px; }
@media (min-width: 900px) { .tete-incrustee.bloc { padding-top: 56px; } }

/* Titres : pas de surtitre, une phrase qui dit quelque chose */
.date-ligne { display: inline-flex; align-items: center; gap: 10px; color: var(--brume); font-size: 18px; text-decoration: none; }
a.date-ligne:hover { color: var(--or); }
.une-titre { font-size: clamp(2rem, 5.6vw, 3.1rem); line-height: 1.18; max-width: 22em; }
.tete-page { display: grid; gap: 10px; }
.tete-page h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.geste-titre { font-size: 26px; color: var(--or); }

/* Votre signe, retenu sur l'appareil */
.mon-signe { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px; border-radius: 24px; background: var(--nuit-2); border: 1.5px solid var(--or); color: var(--creme); text-decoration: none; }
.mon-signe img { width: 96px; height: 130px; object-fit: cover; border-radius: 48px 48px 12px 12px; }
.mon-signe-texte { display: grid; gap: 8px; font-size: 21px; }
.mon-signe-texte strong { font-family: var(--f-titre); font-weight: 400; font-size: 26px; color: var(--or); }
.lien-bouton, .garder-signe { justify-self: start; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--trait-fort); background: none; color: var(--brume); font: inherit; font-size: 17px; cursor: pointer; }
.lien-bouton:hover, .garder-signe:hover { border-color: var(--or); color: var(--or); }
.garder-signe.garde { border-color: var(--or); color: var(--nuit); background: var(--or); font-weight: 700; }

/* Les douze signes en constellation */
/* Ordinateur : grande, sans défilement. Téléphone : taille lisible, la bande glisse au doigt (centrée sur le signe par site.js). */
.constellation { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; -webkit-overflow-scrolling: touch; }
.constellation::-webkit-scrollbar { display: none; }
.constellation svg { width: 640px; max-width: none; height: auto; display: block; overflow: visible; }
@media (min-width: 760px) { .constellation { overflow: visible; margin-inline: 0; padding-inline: 0; } .constellation svg { width: min(820px, 100%); } }
.constellation .nom-signe { font-family: var(--f-texte); }
.constellation a:hover .nom-signe, .constellation a:focus-visible .nom-signe { fill: #e6c27a; }
.constellation a .point { transition: fill .2s, r .2s; }
.constellation a:hover .point, .constellation a:focus-visible .point { fill: #e6c27a; r: 7.5; }
.constellation .glyphe { font-family: var(--f-glyphes); }
.constellation .pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { r: 9; } 50% { r: 11.5; } }
@media (prefers-reduced-motion: reduce) { .constellation .pulse { animation: none; } }

/* Calendrier en fil d'étoiles */
.calendrier { position: relative; }
.calendrier::before { content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px; border-left: 1px dashed rgba(230, 194, 122, .45); }
.cal-icone { position: relative; z-index: 1; background: var(--nuit); border-radius: 50%; padding: 4px; }

/* Titre réservé aux lecteurs d'écran et aux moteurs de recherche */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Le ciel du jour, en grand */
.ciel-hero { position: relative; z-index: 1; }
.ciel-vivant { position: relative; height: min(72vh, 760px); min-height: 420px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, #1b2a5e 0%, var(--nuit) 75%); }
.ciel-scene { position: absolute; top: 58px; left: 0; right: 0; bottom: 118px; display: grid; place-items: center; }
/* le ciel se cadre entre la pastille de la date et les textes du bas : plus rien ne passe dessous */
.ciel-vivant.compact .ciel-scene { bottom: 44px; }
@media (max-width: 520px) { .ciel-scene { bottom: 128px; } .ciel-vivant.compact .ciel-scene { bottom: 44px; } }
.ciel-scene .roue { width: min(420px, 82%); height: auto; }
.ciel-scene canvas { display: block; width: 100%; height: 100%; }
.ciel-date { position: absolute; z-index: 2; top: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); padding: 8px 18px 8px 10px; border-radius: 999px; background: rgba(14, 22, 52, .78); border: 1px solid var(--trait); color: var(--creme); font-size: 17px; line-height: 1.3; text-decoration: none; }
.ciel-date svg { flex: none; }
@media (max-width: 520px) { .ciel-date { font-size: 15px; border-radius: 18px; } }
.ciel-date:hover { color: var(--or); }
.ciel-bas { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 18px; display: grid; gap: 6px; text-align: center; pointer-events: none; }
.ciel-indice { color: var(--brume-2); font-size: 15px; }
.signature { font-family: var(--f-titre); font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: var(--or); text-wrap: balance; }
.ciel-bulle { position: absolute; z-index: 3; top: 0; left: 0; display: grid; gap: 4px; max-width: min(300px, calc(100% - 16px)); padding: 14px 18px; border-radius: 18px; background: rgba(14, 22, 52, .92); border: 1px solid var(--or); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); font-size: 18px; line-height: 1.4; pointer-events: none; }
.ciel-bulle strong { font-family: var(--f-titre); font-weight: 400; font-size: 26px; }
.bulle-pos { color: var(--creme); font-weight: 700; }
.bulle-sens { color: var(--brume); }
.bulle-retro { color: var(--rose); font-size: 16px; }

@media (max-width: 520px) { .ciel-vivant { height: min(66vh, 560px); } }

/* Les planètes du jour, en puces : on les touche comme dans le ciel */
.puces-astres { list-style: none; margin: 0 auto; padding: 14px 20px 6px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; max-width: 1180px; position: relative; z-index: 1; }
.puces-astres::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .puces-astres { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.puce-astre { display: inline-flex; align-items: baseline; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--nuit-2); color: var(--creme); font: inherit; font-size: 17px; white-space: nowrap; cursor: pointer; align-items: center; }
.puce-astre:hover, .puce-astre[aria-pressed="true"] { border-color: var(--or); background: #1f2d63; }
.puce-glyphe { font-family: var(--f-glyphes); font-size: 20px; }
.puce-signe { color: var(--brume); }
.puce-retro { color: var(--rose); }

/* Deux cartes côte à côte : le ciel du jour et le geste */
.deux-colonnes { display: grid; gap: 18px; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.carte-jour { display: grid; gap: 10px; padding: 26px 24px; border-radius: 24px; background: var(--nuit-2); border: 1px solid var(--trait); color: var(--brume); }
.carte-jour .nombre { color: var(--brume-2); font-size: 18px; }

/* L'horoscope de la semaine : l'accroche, les « mouvements » du ciel et les gestes, puis chaque jour */
.semaine-dates { color: var(--or); font-size: 20px; }
.semaine-accroche { display: grid; gap: 12px; max-width: 40em; color: var(--brume); }
.semaine-accroche p:first-child { font-family: var(--f-titre); font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 1.3; color: var(--creme); }
.semaine-accroche .bouton { justify-self: start; margin-top: 6px; }
.semaine-suite { display: grid; gap: 12px; max-width: 40em; color: var(--brume); }
.semaine-suite p:last-child { font-family: var(--f-titre); font-size: clamp(1.3rem, 3.6vw, 1.6rem); line-height: 1.3; color: var(--or); }
.rdv-semaine { margin: 0 0 4px; padding: 14px 16px 14px 34px; border-radius: 16px; background: var(--nuit-3); border: 1px solid var(--trait-fort); color: var(--creme); display: grid; gap: 6px; font-size: 19px; }
.rdv-semaine li::marker { color: var(--or); }
.carte-jour .mouvement, .geste .mouvement { margin-top: 8px; color: var(--creme); font-weight: 700; }
.carte-jour .mouvement:first-of-type { margin-top: 0; }
.geste .question { font-family: var(--f-titre); color: var(--creme); }
.gestes-semaine { font-size: 21px; }
.jours { display: grid; gap: 16px; }
@media (min-width: 700px) { .jours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .jours { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jour { display: grid; gap: 8px; align-content: start; padding: 22px 22px; border-radius: 22px; background: var(--nuit-2); border: 1px solid var(--trait); color: var(--brume); }
.jour h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--or); font-size: 24px; }
.jour.aujourdhui { border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
.signature-fin { text-align: center; font-family: var(--f-titre); font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--or); padding-block: 12px 24px; }

/* Les constellations qui se dessinent : les étoiles apparaissent, puis se relient et restent liées */
.constellation-deco { display: flex; justify-content: center; padding-block: 8px; position: relative; z-index: 1; }
.constellation-deco svg { width: min(260px, 70%); height: auto; overflow: visible; }
.trace-pret .trait { stroke-dasharray: 1; stroke-dashoffset: 1; }
.trace-pret .astre-pt { opacity: 0; }
.trace-on .astre-pt { animation: apparaitre .45s ease forwards; animation-delay: calc(var(--i, 0) * 110ms); }
.trace-on .trait { animation: tracer 1.6s ease-in-out forwards .5s; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }

/* Accueil : l'offre et le ciel du jour côte à côte */
.accueil-hero { display: grid; gap: 22px; padding-block: 12px 24px; align-items: center; }
@media (min-width: 980px) { .accueil-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; padding-top: 28px; } }
.accueil-texte { display: grid; gap: 18px; }
.accueil-texte h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); line-height: 1.1; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.accueil-ciel .ciel-vivant { border-radius: 28px; border: 1px solid var(--trait); }
.ciel-vivant.compact { height: 520px; min-height: 0; }
@media (max-width: 520px) { .ciel-vivant.compact { height: 400px; } }
.engagements-bande { list-style: none; display: grid; gap: 14px; padding-block: 16px 8px; margin: 0 auto; }
@media (min-width: 760px) { .engagements-bande { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.engagements-bande li { display: flex; align-items: center; gap: 14px; color: var(--brume); font-size: 17px; line-height: 1.35; }
.engagements-bande strong { display: block; color: var(--creme); font-size: 19px; }
.engagements-bande svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tete-simple { display: grid; gap: 10px; padding-block: 16px 4px; }
.tete-simple h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }

/* À offrir */
.offrir { display: grid; gap: 20px; padding: 18px; border-radius: 26px; background: linear-gradient(135deg, #1d2b62, var(--nuit-2)); border: 1.5px solid var(--or); scroll-margin-top: 24px; }
.offrir img { width: 100%; height: 220px; object-fit: cover; object-position: center 30%; border-radius: 18px; }
.offrir-texte { display: grid; gap: 12px; align-content: center; }
.offrir-texte h2 { font-size: clamp(2rem, 5vw, 2.6rem); color: var(--or); }
.offrir-texte p { color: var(--creme); }
.offrir-texte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--brume); font-size: 18px; }
.offrir-texte li::before { content: '✦ '; color: var(--or); font-size: 13px; }
.offrir-texte .bouton { justify-self: start; margin-top: 6px; }
@media (min-width: 900px) { .offrir { grid-template-columns: 320px minmax(0, 1fr); gap: 36px; padding: 22px 36px 22px 22px; } .offrir img { height: 100%; min-height: 300px; } }

/* Être prévenu(e) de l'ouverture */
.attente { display: grid; gap: 14px; padding: 26px 24px; border-radius: 24px; background: var(--nuit-2); border: 1px solid var(--trait-fort); scroll-margin-top: 24px; }
.attente-titre { font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
.attente-texte { margin: 0; color: var(--brume); max-width: 46em; }
.attente-form { display: grid; gap: 12px; }
.attente-form label { color: var(--brume); font-size: 17px; }
.attente-ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.attente-ligne input { flex: 1 1 260px; min-width: 0; height: 56px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--trait-fort); background: var(--nuit); color: var(--creme); font: inherit; font-size: 19px; }
.attente-ligne input:focus { border-color: var(--or); outline: none; }
.attente-accord { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.attente-accord input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--or); }
.attente-ok { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--or); color: var(--creme); }
.attente-erreur { margin: 0; padding-left: 1.2em; color: var(--rose); font-size: 17px; }
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note.suivre a { margin-left: 10px; }
.note a { color: var(--or); }

/* Mention légale manquante : elle doit se voir */

/* Pages de texte */
.page-texte { display: grid; gap: 16px; max-width: 780px; padding-block: 20px 48px; }
.page-texte h2 { font-size: 28px; color: var(--or); margin-top: 14px; }
.page-texte p { color: var(--brume); }

/* Erreur Blazor */
#blazor-error-ui { display: none; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 16px 20px; background: #5c1f2a; color: var(--creme); }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ── Mesure d'audience : le bandeau Google Analytics (fine barre en bas, au-dessus des onglets sur téléphone) ── */
.bandeau-mesure { position: fixed; z-index: 20; left: 0; right: 0; bottom: calc(var(--onglets) + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 14px 16px; background: rgba(14, 22, 52, .97); border-top: 1px solid var(--or); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); font-size: 17px; line-height: 1.45; }
.bandeau-mesure[hidden] { display: none; }
.bandeau-mesure p { margin: 0; max-width: 62ch; }
.bandeau-mesure a { color: var(--or); }
.bandeau-choix { display: flex; gap: 12px; }
/* Refuser et Accepter : le même bouton, le même poids */
.bouton-choix { min-height: 48px; min-width: 120px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--or); background: none; color: var(--creme); font: inherit; font-weight: 700; cursor: pointer; }
.bouton-choix:hover, .bouton-choix:focus-visible { background: var(--or); color: var(--nuit); }
@media (min-width: 900px) { .bandeau-mesure { bottom: 0; } }
.pied-lien { padding: 6px 0; border: 0; background: none; color: var(--brume); font: inherit; text-decoration: underline; cursor: pointer; }

/* ── Le tableau de bord (/tableau) ── */
.tableau { display: grid; gap: 34px; padding-block: 24px 48px; }
.tableau h1 { margin: 0; }
.tableau-periodes { display: flex; flex-wrap: wrap; gap: 10px; }
.tableau-periodes a { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--trait-fort); color: var(--creme); text-decoration: none; font-size: 17px; }
.tableau-periodes a.actif { background: var(--or); border-color: var(--or); color: var(--nuit); font-weight: 700; }
.tableau-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tableau-chiffre { padding: 18px 20px; border-radius: 18px; background: var(--nuit-2); border: 1px solid var(--trait); }
.tableau-chiffre strong { display: block; font-family: var(--f-titre); font-size: 40px; font-weight: 400; color: var(--or); line-height: 1.1; }
.tableau-chiffre span { font-size: 16px; color: var(--brume); }
.tableau-bloc { display: grid; gap: 12px; }
.tableau-bloc h2 { margin: 0; font-size: 24px; }
.tableau-note { margin: 0; font-size: 16px; color: var(--brume); }
.tableau-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 34px; }
.barres { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 17px; }
.barres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.barres .barre { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--nuit-3); overflow: hidden; }
.barres .barre span { display: block; height: 100%; border-radius: 4px; background: var(--or); }
.barres .detail { color: var(--brume); font-size: 15px; }
.barres .nombre { font-variant-numeric: tabular-nums; }
.tableau-table { width: 100%; border-collapse: collapse; font-size: 17px; font-variant-numeric: tabular-nums; }
.tableau-table th, .tableau-table td { padding: 8px 10px; border-bottom: 1px solid var(--trait); text-align: right; }
.tableau-table th:first-child, .tableau-table td:first-child { text-align: left; }
.tableau-vide { padding: 24px; border-radius: 18px; background: var(--nuit-2); border: 1px dashed var(--trait-fort); color: var(--brume); }

/* ── Le calendrier du ciel (/lunes) : un mois par carte, centré sur toute la largeur ; chaque rendez-vous s'ajoute à l'agenda ── */
.agenda-tete { display: grid; gap: 14px; max-width: 820px; }
.mois-grille { display: grid; gap: 20px; align-items: start; }
@media (min-width: 760px) { .mois-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mois-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mois { display: grid; gap: 4px; padding: 18px 20px 10px; border-radius: 22px; background: var(--nuit-2); border: 1px solid var(--trait); }
.mois h3 { font-size: 26px; color: var(--or); }
.mois-suite { grid-column: 1 / -1; display: grid; gap: 20px; }
.mois-suite > summary { justify-self: center; display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid var(--trait-fort); color: var(--creme); cursor: pointer; list-style: none; }
.mois-suite > summary::-webkit-details-marker { display: none; }
.mois-suite > summary:hover { border-color: var(--or); color: var(--or); }
.mois-suite[open] > summary { display: none; }
.calendrier li { grid-template-rows: auto auto auto; }
.calendrier .cal-icone { grid-row: 1 / span 2; }
.cal-ajout { grid-column: 2; font-size: 15px; }
.cal-ajout > summary { display: inline-block; padding: 4px 0; color: var(--or); cursor: pointer; list-style: none; }
.cal-ajout > summary::-webkit-details-marker { display: none; }
.cal-ajout[open] > summary { color: var(--brume-2); }
.cal-ajout a { display: inline-flex; margin: 4px 8px 4px 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--trait-fort); color: var(--creme); text-decoration: none; }
.cal-ajout a:hover { border-color: var(--or); color: var(--or); }
.calendrier li:target { background: rgba(230, 194, 122, .08); border-radius: 12px; }

/* ── Installer l'appli (PWA) : caché par défaut, montré par site.js là où c'est possible ── */
.installer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 18px; margin-block: 8px; padding: 18px 20px; border-radius: 22px; background: linear-gradient(135deg, #1d2b62, var(--nuit-2)); border: 1px solid var(--trait-fort); }
.installer[hidden] { display: none; }
.installer > svg { width: 40px; height: 40px; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.installer-texte { display: grid; gap: 2px; color: var(--brume); font-size: 17px; }
.installer-texte strong { font-family: var(--f-titre); font-weight: 400; font-size: 24px; color: var(--creme); }
.installer-partage { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; fill: none; stroke: var(--or); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.installer .bouton { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 700px) { .installer { grid-template-columns: auto minmax(0, 1fr) auto; } .installer .bouton { grid-column: auto; } }
.pied-lien[hidden] { display: none; }
.pied-reseaux svg .trait { stroke-linecap: round; }

/* ── Les illustrations des signes : un format fixe (4:5), qui ne dépend plus de la largeur de la fenêtre, et un
   cadrage propre à chaque image — où se trouve le sujet, en hauteur (repéré à l'œil sur la planche des 12, le 09/10).
   Une règle par fichier : elle vaut partout où l'image est recadrée (cartes, formules, vedettes, encarts). ── */
.formule img { height: auto; aspect-ratio: 1 / 1; }
@media (min-width: 760px) { .rdv img, .formule img { height: auto; aspect-ratio: 4 / 5; } }
img[src$="/belier.webp"] { object-position: center 80%; }
img[src$="/taureau.webp"] { object-position: center 90%; }
img[src$="/gemeaux.webp"] { object-position: center 0%; }
img[src$="/cancer.webp"] { object-position: center 60%; }
img[src$="/lion.webp"] { object-position: center 70%; }
img[src$="/vierge.webp"] { object-position: center 80%; }
img[src$="/balance.webp"] { object-position: center 85%; }
img[src$="/scorpion.webp"] { object-position: center 85%; }
img[src$="/sagittaire.webp"] { object-position: center 55%; }
img[src$="/capricorne.webp"] { object-position: center 70%; }
img[src$="/verseau.webp"] { object-position: center 50%; }
img[src$="/poissons.webp"] { object-position: center 50%; }

/* ── Pages d'erreur (404, 500) : une image du ciel, une phrase, deux chemins ── */
.erreur { display: grid; justify-items: center; gap: 14px; padding-block: 48px 72px; text-align: center; }
.erreur svg { width: min(320px, 80vw); height: auto; }
.erreur-code { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.erreur h1 { font-size: clamp(2rem, 6vw, 3rem); max-width: 18em; }
.erreur .chapo { max-width: 34em; }
.erreur .actions { justify-content: center; margin-top: 8px; }

/* ── Alignement : la suite d'une page de signe et les pages de texte restaient centrées dans une boîte étroite, alors
   que leur titre suit le bord gauche du site. On limite la longueur des lignes, pas la boîte. ── */
.fiche-suite, .page-texte { max-width: 1180px; }
.fiche-suite > *, .page-texte > * { max-width: 820px; }