/* ============================================================
   v78.css · patch lumineux et lecture longue
   Surcharge css/style.css (palette nocturne conservée par défaut).
   - Eclaircit le rendu (parchemin plus lumineux, surfaces aérées)
   - Améliore la lecture longue des croisements signe x maison
   - Ajoute le composant .crois-accordion ("Lire la suite")
   - Améliore le panneau #planet-detail
   - Prépare un mode body.luminous (non activé par défaut)
   ============================================================ */

/* ---------- 1. Palette éclaircie ------------------------------- */
:root {
  /* Parchemin principal légèrement plus lumineux (#F3EBD9 -> #F8F2DE) */
  --white: #F8F2DE;
  --white-dim: #D7CDB3;
  --white-mute: #968B72;

  /* Surfaces surélevées plus aérées */
  --black-soft: #141A36;
  --black-elev: #1C2549;

  /* Or doux dédié v78 (pour titres de croisements et CTA accordéon) */
  --gold-soft: #D9B978;
  --gold-warm: #E6C886;
  --gold-dim: rgba(217, 185, 120, 0.55);

  /* Voile crème très léger réutilisable */
  --cream-veil: rgba(243, 235, 217, 0.03);
  --cream-veil-2: rgba(248, 242, 222, 0.05);
}

/* Corps : texte légèrement plus clair, espace plus aéré */
body {
  color: var(--white);
}

/* Starfield : luminosité subtilement augmentée (si présent) */
.starfield,
.stars,
#starfield,
.bg-stars {
  opacity: 0.85;
  filter: brightness(1.15) saturate(1.05);
}
.starfield::before,
.starfield::after {
  opacity: 0.9;
}

/* Cartes et blocs surélevés : un peu plus aérés */
.card,
.panel,
.surface,
.section-card,
.grimoire-card {
  background-color: rgba(28, 37, 73, 0.55);
  border-color: rgba(217, 185, 120, 0.18);
  padding-block: clamp(1.25rem, 2vw, 1.75rem);
}

/* Plus de respiration verticale entre blocs principaux */
section + section,
.section + .section,
article + article {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

/* Voile crème très léger sur les blocs de lecture longue */
.long-read,
.crois-block,
.interp-block,
.planet-detail-text,
#planet-detail .planet-detail-text {
  background: var(--cream-veil);
}

/* ---------- 2. Lecture longue ---------------------------------- */
.long-read p,
.crois-body p,
.crois-body,
.planet-detail-text p,
.interp-block p {
  line-height: 1.75;
  margin-bottom: 1.25em;
  max-width: 64ch;
}
.long-read p:last-child,
.crois-body p:last-child,
.interp-block p:last-child {
  margin-bottom: 0;
}

/* Le bloc de croisements occupe la largeur disponible mais avec
   un max-width agréable. */
.crois-block {
  max-width: 68ch;
  margin: 0;
  padding: 0;
}

/* v78 correctif : drop cap retiré pour éviter de casser la lecture. */

/* Triplet d'aphorisme (issu des `> **mot · mot · mot**` markdown) */
.crois-body blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02em;
  line-height: 1.5;
  margin: 0 0 1.25em;
  padding: 0.3em 1em;
  color: #5C4220;
  border-left: 2px solid #7A5A18;
  background: rgba(122, 90, 24, 0.05);
  max-width: 60ch;
}

/* Séparateurs internes au texte */
.crois-body hr.crois-sep {
  border: none;
  height: 1px;
  margin: 1.4em auto;
  width: 40%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(122, 90, 24, 0.35) 50%,
    transparent 100%
  );
}

/* ---------- 3. Bloc lecture croisée · Panneau planète --------------
   v78 r2 : le panneau .planet-detail a un fond PARCHEMIN clair.
   On force donc fond clair + texte foncé + or sépia pour la lisibilité.
*/
.crois-section {
  position: relative;
  padding: 1.4rem 1.6rem 1.6rem;
  margin: 0;
  background: transparent;                          /* hérite du panneau parchemin */
  border-left: 3px solid #7A5A18;
  border-radius: 0 4px 4px 0;
}

.crois-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #2A2014;                                   /* noir sépia, contraste maximal */
  margin: 0 0 1rem;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
}

.crois-body {
  color: #2A2014;                                   /* noir sépia, lisible sur parchemin */
  font-size: 0.98rem;
  line-height: 1.78;
}
.crois-body p {
  color: #2A2014 !important;                        /* force partout (priorite sur .planet-detail-text) */
  margin: 0 0 1.1em;
}
.crois-body p:last-child { margin-bottom: 0; }
.crois-body strong { color: #5C4220; font-weight: 600; }
.crois-body em { color: #4A3820; }

/* ============================================================
   v78.3 · Direction artistique éditoriale (DA)
   Trois ornements appliqués aux lectures croisées :
   DA-01 lettrine, DA-02 pull-quote pivot, DA-03 filet orné.
   ============================================================ */

/* DA-01 : lettrine d'entrée sur le premier paragraphe */
.crois-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 4.2em;
  line-height: 0.82;
  padding: 0.05em 0.14em 0 0;
  color: #7A5A18;
  font-feature-settings: "swsh" 1, "ss01" 1;
  font-style: normal;
}
@media (max-width: 720px) {
  .crois-body > p:first-of-type::first-letter {
    font-size: 3.4em;
  }
}

/* DA-02 : pull quote pivot (généré depuis le markdown `>> ...`) */
.crois-body .pull-quote {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.42rem;
  line-height: 1.34;
  color: #5C4220;
  margin: 2rem -1rem 2rem -2.4rem;
  padding: 0.2rem 0 0.2rem 1.8rem;
  border-left: 2px solid #7A5A18;
  letter-spacing: -0.005em;
  text-wrap: balance;
  font-weight: 400;
  max-width: none;
  background: transparent;
}
@media (max-width: 720px) {
  .crois-body .pull-quote {
    margin: 1.6rem 0;
    font-size: 1.18rem;
    padding-left: 1rem;
  }
}

/* DA-03 : filet de chapitre orné (généré depuis `✶ · ✶`) */
.crois-body hr.crois-sep-ornee {
  border: 0;
  height: auto;
  margin: 2.4rem auto 2rem;
  text-align: center;
  background: none;
  width: auto;
}
.crois-body hr.crois-sep-ornee::before {
  content: "✶  ·  ✶";
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.35em;
  color: #7A5A18;
}

/* ============================================================
   v78.4 · BLOC PARCHEMIN pour LE GRIMOIRE et les paires d'aspects
   ------------------------------------------------------------
   Reproduit fidèlement la mise en page validée pour le panneau
   planète : fond parchemin clair, texte sépia, bordure or sépia,
   lettrine + pull-quote + filet orné. Identique aux croisements.
   ============================================================ */

/* Wrapper externe (article.parchemin-card) · fond parchemin */
.parchemin-card {
  background: #F3EBD9 !important;
  background-image:
    radial-gradient(1500px 700px at 20% 0%, rgba(122,90,24,0.07), transparent 70%),
    radial-gradient(1200px 600px at 80% 100%, rgba(122,90,24,0.05), transparent 70%) !important;
  border-radius: 6px;
  box-shadow:
    0 2px 0 rgba(0,0,0,0.18),
    0 30px 60px -20px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(122,90,24,0.18);
  max-width: 720px;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden;
  color: #2A2014 !important;
  /* Surcharge la couleur claire héritée de .grimoire-detail-body */
}

/* Section intérieure · bord doré à gauche + padding interne */
.parchemin-card .parchemin-section {
  position: relative;
  padding: 2.6rem 2.8rem 2.8rem;
  background: transparent;
  border-left: 3px solid #7A5A18;
  border-radius: 0 4px 4px 0;
}
@media (max-width: 720px) {
  .parchemin-card .parchemin-section {
    padding: 1.8rem 1.4rem 2rem;
  }
}

/* Le .crois-body interne hérite naturellement de tous les styles
   définis plus haut (couleur sépia, lettrine, pull-quote, filet orné).
   Pas besoin de redéfinir.  Le seul override nécessaire : forcer
   la couleur sépia contre la règle .grimoire-detail-body { color:white }
   de style.css */
.parchemin-card .crois-body,
.parchemin-card .crois-body p {
  color: #2A2014 !important;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.04rem;
  line-height: 1.78;
  max-width: none;
}
.parchemin-card .crois-body strong { color: #5C4220 !important; }
.parchemin-card .crois-body em { color: #4A3820 !important; }
.parchemin-card .crois-body blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02em;
  line-height: 1.5;
  margin: 1.25em 0;
  padding: 0.3em 1em;
  color: #5C4220 !important;
  border-left: 2px solid #7A5A18;
  background: rgba(122, 90, 24, 0.05);
}

/* Paires d'aspects : même traitement parchemin */
.grimoire-aspect-pair {
  background: #F3EBD9 !important;
  background-image:
    radial-gradient(1500px 700px at 20% 0%, rgba(122,90,24,0.07), transparent 70%),
    radial-gradient(1200px 600px at 80% 100%, rgba(122,90,24,0.05), transparent 70%) !important;
  border-radius: 6px;
  border-left: 3px solid #7A5A18;
  padding: 2.2rem 2.4rem 2.4rem !important;
  margin-bottom: 1.6rem !important;
  color: #2A2014 !important;
  box-shadow:
    0 2px 0 rgba(0,0,0,0.14),
    0 24px 48px -18px rgba(0,0,0,0.45);
}
@media (max-width: 720px) {
  .grimoire-aspect-pair {
    padding: 1.6rem 1.4rem 1.8rem !important;
  }
}
.grimoire-aspect-pair .grimoire-aspect-pair-head {
  border-bottom: 1px solid rgba(122,90,24,0.25);
  padding-bottom: 0.8rem;
  margin-bottom: 1.2rem;
}
.grimoire-aspect-pair .grimoire-aspect-pair-head h3 {
  color: #2A2014 !important;
  font-family: var(--serif);
}
.grimoire-aspect-pair .grimoire-aspect-pair-glyphs {
  color: #7A5A18 !important;
}
.grimoire-aspect-pair p {
  color: #2A2014 !important;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 1.1em;
}
.grimoire-aspect-pair strong { color: #5C4220 !important; font-weight: 600; }
.grimoire-aspect-pair em { color: #4A3820 !important; }
.grimoire-aspect-pair blockquote {
  font-family: var(--serif);
  font-style: italic;
  margin: 1.2em 0;
  padding: 0.3em 1em;
  color: #5C4220 !important;
  border-left: 2px solid #7A5A18;
  background: rgba(122,90,24,0.05);
}
.grimoire-aspect-pair p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.8em;
  line-height: 0.85;
  padding: 0.05em 0.14em 0 0;
  color: #7A5A18;
  font-feature-settings: "swsh" 1, "ss01" 1;
  font-style: normal;
}
@media (max-width: 720px) {
  .grimoire-aspect-pair p:first-of-type::first-letter { font-size: 3em; }
}
.grimoire-aspect-pair .pull-quote {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.42rem;
  line-height: 1.34;
  color: #5C4220 !important;
  margin: 1.8rem -0.6rem 1.8rem -1.6rem;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 2px solid #7A5A18;
  letter-spacing: -0.005em;
  text-wrap: balance;
  font-weight: 400;
  background: transparent;
}
@media (max-width: 720px) {
  .grimoire-aspect-pair .pull-quote {
    margin: 1.4rem 0;
    font-size: 1.18rem;
    padding-left: 0.9rem;
  }
}
.grimoire-aspect-pair hr.crois-sep-ornee {
  border: 0;
  height: auto;
  margin: 2.2rem auto 1.8rem;
  text-align: center;
  background: none;
  width: auto;
}
.grimoire-aspect-pair hr.crois-sep-ornee::before {
  content: "✶  ·  ✶";
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: #7A5A18;
}

/* Lien "Lire plus" vers la page Grimoire */
.crois-readmore {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.55rem 1.2rem;
  background: #7A5A18;
  color: #FBF3DC !important;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.18s, transform 0.18s;
}
.crois-readmore:hover,
.crois-readmore:focus-visible {
  background: #5C4220;
  transform: translateY(-1px);
  outline: none;
}

.crois-empty {
  font-style: italic;
  color: var(--white-dim);
  opacity: 0.85;
}

/* v78 r2 : accordéon retiré. Remplacé par un lien externe "Lire plus" vers la page Grimoire. */

/* ---------- 4. Panneau #planet-detail amélioré ----------------- */
#planet-detail {
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
}

#planet-detail .planet-detail-text {
  color: var(--white);
  font-size: 0.98rem;
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

/* v78 correctif : on supprime la numérotation 01·/02·/03·
   puisqu'il n'y a plus qu'une seule section. */

/* Espacement supplémentaire avant le bloc d'aspects */
#planet-detail .planet-detail-aspects {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(217, 185, 120, 0.15);
}

/* ---------- 5. Mode lumineux (body.luminous) ------------------- */
/* v78.8 : code retiré, jamais activé. Si on veut un toggle "mode diurne"
   un jour, on le ressortira proprement (et on l'exposera dans l'UI). */

/* ---------- 5bis. Grilles du Grimoire : 3 colonnes uniformes ----- */
/* v78 r2 : Stéphane demande des cases plus grandes, 3 par ligne. */
.grimoire-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 900px) {
  .grimoire-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .grimoire-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Cartes Grimoire : plus grandes, plus généreuses */
.grimoire-card {
  padding: 1.75rem 1.5rem !important;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
}
.grimoire-card .grimoire-card-name {
  font-size: 1.15rem;
  line-height: 1.35;
}
.grimoire-card .grimoire-card-theme,
.grimoire-card .grimoire-card-meta,
.grimoire-card .grimoire-card-dates {
  font-size: 0.88rem;
  opacity: 0.85;
}
.grimoire-card .grimoire-card-glyph,
.grimoire-card .grimoire-card-roman {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}

/* Cartes lecture croisée : variante un peu plus discrète */
.grimoire-card-croisement {
  background: rgba(28, 37, 73, 0.50) !important;
  border-color: rgba(217, 185, 120, 0.30) !important;
}
.grimoire-card-croisement:hover {
  border-color: var(--gold-warm) !important;
  background: rgba(28, 37, 73, 0.70) !important;
}
.grimoire-card-empty {
  opacity: 0.55;
  pointer-events: none;
}

/* Sommaire Grimoire : Planètes & Signes hérite du look "planètes" */
.grimoire-pillar-planetes-signes {
  /* repris du style des autres piliers, on garde tout */
}

/* ---------- 6. Accessibilité ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .crois-collapsible {
    transition: none;
  }
}

/* Liens et focus visibles plus lumineux */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: 2px;
}

/* ---------- 7. CTA Grimoire (remplace bloc auteur dans index) ---------- */
.grimoire-cta-band .portrait-band-inner {
  align-items: center;
}
.grimoire-cta-visual {
  display: block;
  width: 100%;
  max-width: 360px;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(200, 162, 92, 0.25);
}
.grimoire-cta-visual:hover,
.grimoire-cta-visual:focus-visible {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(228, 192, 126, 0.55);
  outline: none;
}
.grimoire-cta-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   v78.1 · Homepage Direction A : formulaire de naissance hero
   ============================================================ */

.home-hero {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0.10;
}
.home-hero-bg .home-zw {
  width: clamp(380px, 60vw, 720px);
  height: auto;
  transform: translateX(15%);
  animation: home-zw-rotate 240s linear infinite;
  filter: hue-rotate(20deg) brightness(1.4) sepia(0.3) saturate(2);
}
@keyframes home-zw-rotate {
  from { transform: translateX(15%) rotate(0deg); }
  to   { transform: translateX(15%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-bg .home-zw { animation: none; }
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .home-hero-inner {
    grid-template-columns: 1fr 1.05fr;
    gap: 4rem;
  }
}

.home-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 520px;
}
.home-hero-text .meta-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.85;
}
.home-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}
.home-hero-title em {
  font-style: italic;
  color: var(--gold-warm);
}
.home-hero-sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--white-dim);
  margin: 0.5rem 0 0;
  max-width: 42ch;
}

/* Formulaire de naissance · carte flottante or sur nuit */
.home-birth-form {
  background: rgba(28, 37, 73, 0.85);
  border: 1px solid rgba(217, 185, 120, 0.32);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.40),
              0 0 0 1px rgba(217, 185, 120, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-bf-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.home-bf-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.home-bf-field-wide {
  grid-column: 1 / -1;
}
.home-bf-field label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.92;
}
.home-bf-field input {
  background: rgba(11, 16, 32, 0.6);
  border: 1px solid rgba(217, 185, 120, 0.30);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.home-bf-field input:focus {
  outline: none;
  border-color: var(--gold-warm);
  background: rgba(11, 16, 32, 0.85);
  box-shadow: 0 0 0 2px rgba(217, 185, 120, 0.18);
}
.home-bf-field input::placeholder {
  color: var(--white-mute);
  opacity: 0.7;
}
.home-bf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 1.05rem 1.5rem;
  background: linear-gradient(180deg, #E6C886 0%, #C8A25C 100%);
  color: #1A2240;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.home-bf-submit:hover,
.home-bf-submit:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(217, 185, 120, 0.35);
  outline: none;
}
.home-bf-submit span {
  font-size: 1.1em;
  font-weight: 500;
}
.home-bf-hint {
  font-size: 0.78rem;
  color: var(--white-mute);
  text-align: center;
  margin: 1rem 0 0;
  opacity: 0.85;
}

/* ============================================================
   v78.2 · Starfield discret unique (#starfield, cf. main.js)
   Les anciennes classes .site-stars-global / .site-glow-global
   sont retirées : on revient au fond sobre commun avec Le Grimoire.
   ============================================================ */

/* Toutes les sections du main passent au-dessus du fond étoilé */
main#main > section {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Hero Thème Natal : on garde son layout mais sans son propre fond
   puisque le starfield est désormais global */
.theme-hero {
  background: transparent !important;
}
.theme-hero::before,
.theme-hero::after {
  display: none !important;
}

/* Le footer garde son fond solide (pas de transparence) */
.site-footer {
  position: relative;
  z-index: 2;
  background: var(--black);
}

/* Bandes manifestes / portrait : transparentes pour laisser passer les étoiles */
.manifesto-band,
.portrait-band,
.grimoire-cta-band,
#packs-preview,
#testimonials {
  background: transparent !important;
}

/* Hero Ciel du Jour : compact pour que la roue apparaisse vite */
.ciel-hero,
.ciel-hero-compact {
  min-height: 32vh !important;
  padding: 4.5rem 1.5rem 1.5rem !important;
  background: transparent !important;
}
.ciel-hero .theme-hero-title,
.ciel-hero-compact .theme-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
}

/* ============================================================
   v78.2 · Bandeau de naissance inline (Prénom, Né(e) le... UTC...)
   ============================================================ */
.wheel-birth-info-inline {
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.wheel-birth-info-inline .birth-line {
  display: inline;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--white-dim);
}
.wheel-birth-info-inline .birth-name {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent-bright);
  font-size: 1.02rem;
  margin-right: 0.15em;
}
.wheel-birth-info-inline .birth-bornon {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  display: inline;
  margin: 0 0.3em 0 0;
}
.wheel-birth-info-inline .birth-when {
  color: var(--white);
  font-weight: 500;
}
.wheel-birth-info-inline .birth-coords {
  color: var(--white-mute);
  font-size: 0.85em;
  margin-left: 0.3em;
}

/* ============================================================
   v78.6 · Bloc Google Maps (section #google de packs.html)
   Responsive 16:9, parchemin, ombre douce.
   ============================================================ */
.google-map-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* ratio 16:9 */
  height: 0;
  overflow: hidden;
  margin-top: 2rem;
  border-radius: 6px;
  box-shadow:
    0 2px 0 rgba(0,0,0,0.18),
    0 24px 48px -16px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(200,162,92,0.25);
  background: rgba(11,16,32,0.4);
}
.google-map-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 720px) {
  .google-map-wrap {
    padding-bottom: 75%; /* ratio 4:3 sur mobile, plus lisible */
  }
}

/* CTA sous la carte Google (packs.html) */
.google-cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.btn-arrow-secondary {
  background: transparent;
  border: 1px solid rgba(200,162,92,0.45);
  color: var(--accent-bright, #C8A25C);
}
.btn-arrow-secondary:hover {
  border-color: var(--accent-bright, #C8A25C);
  color: #F0EAD8;
}
/* ============================================================
   google-reviews.css · Charte parchemin/sépia
   ------------------------------------------------------------
   À ajouter dans css/v78.css (ou en fichier séparé chargé
   après v78.css). Conserver les variables --serif, --mono,
   --accent-bright, --sepia-deep déjà définies sur le site.
   ============================================================ */

.google-reviews-wrap {
  margin: 0 auto;
  padding: 0.5rem 0 0;
}

/* En-tête : note moyenne + lien Google
   Parchemin solide pour éviter que les couleurs sombres de
   texte ne disparaissent sur le fond sombre du site. */
.gr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.8rem;
  margin-bottom: 2rem;
  background: #F3EBD9;
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(122, 90, 24, 0.06), transparent 70%);
  border-radius: 6px;
  border-left: 2px solid #7A5A18;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.1),
    0 12px 24px -10px rgba(0,0,0,0.25);
  color: #2A2014;
}

.gr-head .gr-rating-num,
.gr-head .gr-rating-count,
.gr-head .gr-stars { color: inherit; }
.gr-head .gr-rating-num { color: #5C4220; }
.gr-head .gr-rating-count { color: #7A5A18; }

.gr-head-rating {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.gr-rating-num {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: #5C4220;
  line-height: 1;
}

.gr-rating-count {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #7A5A18;
  text-transform: uppercase;
}

.gr-google-link {
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7A5A18;
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 90, 24, 0.3);
  padding-bottom: 2px;
  transition: color 0.2s;
}

.gr-google-link:hover {
  color: #C8A25C;
  border-bottom-color: #C8A25C;
}

/* Étoiles */
.gr-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.gr-star { color: rgba(122, 90, 24, 0.22); }
.gr-star.is-on { color: #C8A25C; }

/* Grille des avis : 1 colonne mobile, 2 tablette, 3 ou 4 desktop pour
   coller à la largeur des autres blocs de la home */
.gr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

@media (min-width: 720px) {
  .gr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gr-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .gr-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Carte d'avis individuelle */
.gr-card {
  background: #F3EBD9;
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(122, 90, 24, 0.06), transparent 70%);
  border-radius: 6px;
  border-left: 2px solid #7A5A18;
  padding: 1.4rem 1.6rem;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.1),
    0 12px 24px -10px rgba(0,0,0,0.25);
  color: #2A2014;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.gr-card-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.gr-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(122,90,24,0.25);
  flex-shrink: 0;
}

.gr-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(122, 90, 24, 0.15);
  color: #5C4220;
  font-family: var(--serif, serif);
  font-weight: 600;
  font-size: 1.1rem;
}

.gr-meta {
  flex: 1;
  min-width: 0;
}

.gr-author {
  font-family: var(--serif, 'Fraunces', serif);
  font-weight: 500;
  font-size: 1rem;
  color: #2A2014;
}

.gr-date {
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #7A5A18;
  text-transform: uppercase;
  margin-top: 2px;
}

.gr-text {
  font-family: var(--serif, 'Fraunces', serif);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #2A2014;
  margin: 0;
  text-wrap: pretty;
}

/* Limite de longueur pour ne pas casser la grille */
.gr-text {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA "Donnez votre avis sur votre consultation"
   Parchemin solide pour assurer la lisibilité sur le fond sombre du site.
   Sélecteurs spécifiques (.gr-cta .gr-cta-label, .gr-cta a.gr-cta-link)
   pour gagner les batailles de cascade contre les styles globaux. */
.gr-cta {
  margin-top: 2.4rem;
  padding: 1.4rem 1.8rem;
  background: #F3EBD9;
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(122, 90, 24, 0.06), transparent 70%);
  border-radius: 6px;
  border-left: 2px solid #7A5A18;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.1),
    0 12px 24px -10px rgba(0,0,0,0.25);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  color: #2A2014;
}

.gr-cta .gr-cta-label {
  font-family: var(--serif, 'Fraunces', serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.05rem;
  color: #2A2014;
}

.gr-cta a.gr-cta-link,
.gr-cta a.gr-cta-link:link,
.gr-cta a.gr-cta-link:visited {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5C4220;
  text-decoration: none;
  padding: 0.7rem 1.2rem;
  border: 1px solid #7A5A18;
  border-radius: 2px;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.gr-cta a.gr-cta-link:hover,
.gr-cta a.gr-cta-link:focus-visible {
  background: #7A5A18;
  color: #F3EBD9;
  border-color: #7A5A18;
}

@media (max-width: 540px) {
  .gr-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .gr-cta a.gr-cta-link {
    align-self: stretch;
    text-align: center;
  }
}

/* ============================================================
   v78.8 · Grille Planète × Maison (6 cartes Don/Ombre/...) en
   variante parchemin, quand la grille est imbriquée dans un
   article.parchemin-card.grimoire-pm-parchemin.
   ------------------------------------------------------------
   Idée : on garde la structure des 6 cartes (icône + label + p),
   mais on remplace le fond sombre par un crème, et on adapte
   les couleurs des accents pour rester lisibles sur fond clair.
   ============================================================ */
.grimoire-pm-parchemin .parchemin-section {
  padding: 2.2rem 2.4rem 2.4rem;
}
@media (max-width: 720px) {
  .grimoire-pm-parchemin .parchemin-section {
    padding: 1.4rem 1.2rem 1.6rem;
  }
}

.grimoire-pm-parchemin .grimoire-pm-grid {
  margin: 0;
  max-width: none;
}

.grimoire-pm-parchemin .grimoire-pm-card {
  background: rgba(122, 90, 24, 0.05) !important;
  border: 1px solid rgba(122, 90, 24, 0.22) !important;
  border-radius: 6px;
  padding: 1.2rem 1.3rem 1.3rem;
}
.grimoire-pm-parchemin .grimoire-pm-card:hover {
  border-color: rgba(122, 90, 24, 0.4) !important;
}

.grimoire-pm-parchemin .grimoire-pm-card-head {
  border-bottom: 1px solid rgba(122, 90, 24, 0.25);
}

.grimoire-pm-parchemin .grimoire-pm-label {
  color: #5C4220 !important;
}

.grimoire-pm-parchemin .grimoire-pm-card p {
  color: #2A2014 !important;
  font-weight: 300;
}

/* Accents par section, recolorés pour fond crème.
   On garde l'esprit (or pour Don, ombre froide pour Ombre,
   tons chauds pour Carrière, rose pour Relations, etc.)
   mais on tasse la saturation pour ne pas piquer les yeux. */
.grimoire-pm-parchemin .grimoire-pm-don .grimoire-pm-icon       { color: #7A5A18 !important; }
.grimoire-pm-parchemin .grimoire-pm-ombre .grimoire-pm-icon     { color: #4E6A82 !important; }
.grimoire-pm-parchemin .grimoire-pm-carriere .grimoire-pm-icon  { color: #5C4220 !important; }
.grimoire-pm-parchemin .grimoire-pm-relations .grimoire-pm-icon { color: #A0566C !important; }
.grimoire-pm-parchemin .grimoire-pm-activation .grimoire-pm-icon{ color: #7A5A18 !important; }
.grimoire-pm-parchemin .grimoire-pm-lecon .grimoire-pm-icon     { color: #5E7E4C !important; }

/* ============================================================
   v78.8 · Suppression du code body.luminous mort
   (anciennement v78.css:464-535, code jamais activé)
   Conservé en commentaire pour mémoire.
   ============================================================ */

/* ============================================================
   v78.9 · Page À propos refonte : layout final portrait + texte
   ============================================================ */
.about-final-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.4rem;
  align-items: center;
  margin: 2.5rem 0 1.5rem;
}
@media (max-width: 720px) {
  .about-final-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
}
.portrait-compact {
  margin: 0;
  max-width: 220px;
}
.portrait-compact img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 1px solid rgba(212, 162, 74, 0.25);
  display: block;
}
@media (max-width: 720px) {
  .portrait-compact {
    margin: 0 auto;
    max-width: 160px;
  }
}
.about-final-text p {
  font-family: var(--serif, 'Fraunces', serif);
  font-weight: 300;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--white, #F0EAD8);
  margin: 0;
}
@media (max-width: 720px) {
  .about-final-text .btn-row {
    justify-content: center;
  }
}

/* ============================================================
   v78.10 · Calculateur thème natal : refonte UI
   ------------------------------------------------------------
   - Profil enregistré intégré dans la grille tfc-grid
     (même largeur visuelle que les autres champs)
   - 3 pills Placidus / Égales / Koch (au lieu de 2)
   - Case "Heure inconnue" sous l'input heure
   - Pills désactivables (Placidus/Koch quand heure inconnue)
   ============================================================ */

/* Champ pleine largeur dans la grille (couvre les 2 colonnes) */
.tfc-grid .tfc-field-full {
  grid-column: 1 / -1;
}

/* Wrapper "profil enregistré" : mêmes paddings/typo que .tfc-field */
.tfc-field-saved select {
  width: 100%;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  background: rgba(11, 16, 32, 0.55);
  color: var(--white, #F8F2DE);
  border: 1px solid rgba(212, 162, 74, 0.25);
  border-radius: 4px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(212, 162, 74, 0.7) 50%),
    linear-gradient(135deg, rgba(212, 162, 74, 0.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.1em, calc(100% - 12px) 1.1em;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.tfc-field-saved select:focus {
  outline: none;
  border-color: rgba(212, 162, 74, 0.6);
}

/* Case à cocher "Heure inconnue" sous l'input heure */
.tfc-time-unknown {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 224, 204, 0.7);
  cursor: pointer;
  user-select: none;
}
.tfc-time-unknown input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent-bright, #D4A24A);
  cursor: pointer;
}
.tfc-time-unknown:hover {
  color: rgba(232, 224, 204, 0.95);
}

/* Pills désactivables (state quand "Heure inconnue" est cochée) */
.tfc-pill[data-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
  filter: saturate(0.5);
}

/* Hint sous le fieldset système de maisons */
#house-system-hint {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(212, 162, 74, 0.75);
}

/* Responsive : 3 pills s'empilent proprement sur mobile */
@media (max-width: 540px) {
  .tfc-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
  .tfc-pill {
    text-align: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.78rem;
  }
}

/* Feedback visuel quand un profil est chargé (flash doré 1.5s) */
@keyframes tfc-prefilled-flash {
  0%   { box-shadow: 0 0 0 0 rgba(212, 162, 74, 0.45); }
  50%  { box-shadow: 0 0 0 6px rgba(212, 162, 74, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(212, 162, 74, 0); }
}
.theme-form-card.is-prefilled {
  animation: tfc-prefilled-flash 1.5s ease-out 1;
}

/* ============================================================
   v78.11 · Bandeau citation Alice Bailey en variante parchemin
   sur la page À propos (fond crème, texte sépia foncé)
   ============================================================ */
.manifesto-band.manifesto-band-parchemin {
  background: #F3EBD9;
  background-image:
    radial-gradient(1500px 700px at 20% 0%, rgba(122,90,24,0.06), transparent 70%),
    radial-gradient(1200px 600px at 80% 100%, rgba(122,90,24,0.04), transparent 70%);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(122,90,24,0.16);
  padding: 3rem 0;
}

.manifesto-band.manifesto-band-parchemin .manifesto-inner h2,
.manifesto-band.manifesto-band-parchemin .manifesto-inner h2 em {
  color: #2A2014;
  font-family: var(--serif, 'Fraunces', serif);
}

.manifesto-band.manifesto-band-parchemin .manifesto-inner .sig {
  color: #7A5A18;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
}

.manifesto-band.manifesto-band-parchemin .manifesto-inner .sig span {
  background: linear-gradient(to right,
    rgba(122, 90, 24, 0) 0%,
    rgba(122, 90, 24, 0.5) 50%,
    rgba(122, 90, 24, 0.5) 100%);
}

/* ============================================================
   v78.23 · Bouton "retour en haut" (global, toutes pages)
   ------------------------------------------------------------
   Apparaît en bas-droite après scroll > 400 px. Click → smooth
   scroll vers le sommet de la page. Le comportement JS vit dans
   js/main.js qui ajoute/retire la classe .is-visible.
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(11, 16, 32, 0.78);
  border: 1px solid rgba(212, 162, 74, 0.45);
  color: var(--accent-bright, #D4A24A);
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease, box-shadow 0.2s ease;
  z-index: 60;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.4);
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: rgba(11, 16, 32, 0.95);
  color: #F8F2DE;
  border-color: var(--accent-bright, #D4A24A);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.55);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--accent-bright, #D4A24A);
  outline-offset: 2px;
}
@media (max-width: 540px) {
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    font-size: 1.4rem;
  }
}

/* ============================================================
   v78.26 · Rubrique "Vos affinités célestes"
   Apparaît dans la fiche-résultat du thème natal, sous le Big 3,
   au-dessus de l'email-gate. Affiche les matches avec la base
   des 334+ célébrités.
   ============================================================ */
.affinites-wrap {
  margin: 2.5rem 0 1.5rem;
  padding: 1.6rem 1.4rem 1.2rem;
  border-radius: 8px;
  background: rgba(28, 37, 73, 0.30);
  border: 0.5px solid rgba(212, 162, 74, 0.18);
}
.affinites-title {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--white, #F8F2DE);
  margin: 0 0 0.4rem;
}
.affinites-intro {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(232, 224, 204, 0.72);
  margin: 0 0 1.5rem;
}

/* ===== Blocs (une catégorie de match = un bloc) ===== */
.aff-block {
  margin: 1.4rem 0;
  padding: 0;
}
.aff-block-title {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--white, #F8F2DE);
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.aff-count {
  display: inline-block;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  background: rgba(212, 162, 74, 0.18);
  color: var(--accent-bright, #D4A24A);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.aff-pill {
  display: inline-block;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #F4D58A 0%, #D4A24A 50%, #8E6420 100%);
  color: #1B2240;
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
  font-weight: 500;
}
.aff-block-sub {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(232, 224, 204, 0.6);
  margin: 0 0 0.9rem;
}

/* ===== Grille des cartes ===== */
.aff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.8rem;
  margin: 0;
}
.aff-grid-top {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ===== Une carte ===== */
.aff-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgba(11, 16, 32, 0.45);
  border: 0.5px solid rgba(212, 162, 74, 0.15);
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.aff-card:hover,
.aff-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(212, 162, 74, 0.45);
  background: rgba(11, 16, 32, 0.65);
  outline: none;
}
.aff-card-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, rgba(28, 37, 73, 0.85) 0%, rgba(11, 16, 32, 0.85) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.aff-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.aff-card-photo-placeholder {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 2.4rem;
  color: rgba(212, 162, 74, 0.5);
  font-weight: 300;
}
.aff-card-body {
  padding: 0.55rem 0.65rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.aff-card-name {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--white, #F8F2DE);
  line-height: 1.2;
}
.aff-card-signs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-family: 'DejaVu Sans', 'Apple Symbols', sans-serif;
  font-size: 1.1rem;
}
.aff-card-signs .aff-glyph small {
  font-size: 0.7em;
  margin-left: 0.05em;
}
.aff-card-reason {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: rgba(212, 162, 74, 0.85);
  text-transform: uppercase;
  margin-top: 0.15rem;
}

/* ===== Top 3 (mise en avant) ===== */
.aff-block-top3 {
  padding: 1rem 0.9rem;
  background: rgba(212, 162, 74, 0.06);
  border: 0.5px solid rgba(212, 162, 74, 0.28);
  border-radius: 6px;
  margin-bottom: 1.6rem;
}
.aff-block-top3 .aff-card {
  border-color: rgba(212, 162, 74, 0.35);
  background: rgba(11, 16, 32, 0.65);
}

/* ===== Triplet vide (rareté assumée) ===== */
.aff-block-empty .aff-empty-msg {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(232, 224, 204, 0.45);
  margin: 0.2rem 0 0;
  padding: 0.8rem;
  text-align: center;
  border: 0.5px dashed rgba(212, 162, 74, 0.2);
  border-radius: 4px;
}

/* ===== Familles élargies (accordéon) ===== */
.aff-block-families {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 0.5px solid rgba(212, 162, 74, 0.15);
}
.aff-family {
  margin: 0.6rem 0;
  border: 0.5px solid rgba(212, 162, 74, 0.15);
  border-radius: 5px;
  overflow: hidden;
}
.aff-family[open] {
  border-color: rgba(212, 162, 74, 0.35);
}
.aff-family > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  color: var(--white, #F8F2DE);
  background: rgba(11, 16, 32, 0.5);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  user-select: none;
}
.aff-family > summary::-webkit-details-marker { display: none; }
.aff-family > summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--mono, monospace);
  font-size: 1.2rem;
  color: var(--accent-bright, #D4A24A);
  transition: transform 0.15s ease;
}
.aff-family[open] > summary::after { content: '−'; }
.aff-family-sym {
  font-family: 'DejaVu Sans', 'Apple Symbols', sans-serif;
  font-size: 1.3rem;
  color: var(--accent-bright, #D4A24A);
}
.aff-family[open] > .aff-grid {
  padding: 0.8rem;
}
.aff-family > .aff-grid {
  padding: 0;
}

.aff-more {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(232, 224, 204, 0.6);
  margin: 0.7rem 0 0;
  text-align: center;
}
.aff-more a {
  color: var(--accent-bright, #D4A24A);
  text-decoration: underline;
  text-decoration-color: rgba(212, 162, 74, 0.4);
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .affinites-wrap {
    padding: 1.2rem 0.9rem 1rem;
    margin: 1.8rem 0 1rem;
  }
  .affinites-title { font-size: 1.3rem; }
  .aff-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .aff-card-photo-placeholder { font-size: 2rem; }
  .aff-card-name { font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .aff-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 0.6rem; }
}

/* ============================================================
   v78.27 · Affinités compactes (texte, sans photos)
   Toutes les rubriques d'affinités SAUF "Vos doubles dans l'histoire"
   passent en liste de noms cliquables, prose serrée, gain de place.
   ============================================================ */
.aff-text-block {
  margin: 1.2rem 0;
}
.aff-text-block + .aff-text-block {
  margin-top: 1rem;
}
.aff-text-title {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--white, #F8F2DE);
  margin: 0 0 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.aff-text-sub {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.82rem;
  color: rgba(232, 224, 204, 0.55);
  margin: 0 0 0.45rem;
}
.aff-name-list {
  margin: 0;
  line-height: 1.7;
  font-size: 0.92rem;
  color: rgba(232, 224, 204, 0.85);
}
.aff-name {
  color: var(--white, #F8F2DE);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(212, 162, 74, 0.4);
  transition: color 0.15s ease, border-color 0.15s ease;
  font-family: var(--serif, 'Fraunces', serif);
}
.aff-name:hover,
.aff-name:focus-visible {
  color: var(--accent-bright, #D4A24A);
  border-bottom-color: var(--accent-bright, #D4A24A);
  outline: none;
}
.aff-name-suffix {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.7rem;
  color: rgba(212, 162, 74, 0.7);
  letter-spacing: 0.02em;
  border-bottom: none;
  margin-left: 0.15rem;
}
.aff-sep {
  color: rgba(212, 162, 74, 0.3);
  margin: 0 0.15rem;
  user-select: none;
}
.aff-text-block-empty .aff-empty-msg {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.82rem;
  color: rgba(232, 224, 204, 0.4);
  margin: 0.2rem 0 0;
  padding: 0.5rem 0.7rem;
  text-align: center;
  border: 0.5px dashed rgba(212, 162, 74, 0.18);
  border-radius: 4px;
}

/* Familles : accordéons texte (override de la version cartes) */
.aff-block-families {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 0.5px solid rgba(212, 162, 74, 0.15);
}
.aff-block-families .aff-family {
  margin: 0.4rem 0;
  border: 0.5px solid rgba(212, 162, 74, 0.12);
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
}
.aff-block-families .aff-family[open] {
  border-color: rgba(212, 162, 74, 0.3);
}
.aff-block-families .aff-family > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.92rem;
  color: var(--white, #F8F2DE);
  background: rgba(11, 16, 32, 0.4);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.aff-block-families .aff-family[open] > .aff-name-list {
  padding: 0.7rem 0.8rem 0.85rem;
}
.aff-block-families .aff-family > .aff-name-list {
  font-size: 0.88rem;
  line-height: 1.65;
}

@media (max-width: 540px) {
  .aff-name-list { font-size: 0.85rem; line-height: 1.55; }
  .aff-text-title { font-size: 0.95rem; }
  .aff-block-families .aff-family > .aff-name-list { font-size: 0.82rem; }
}

/* ============================================================
   v78.28 · Affinités : toutes les sous-rubriques en accordéons
   Style harmonisé avec les "Mêmes Soleil en …" des familles.
   ============================================================ */
.aff-accordions {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.aff-acc-body {
  padding: 0.7rem 0.9rem 0.85rem;
}
.aff-acc-body > .aff-acc-sub {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(232, 224, 204, 0.6);
  margin: 0 0 0.55rem;
}
.aff-acc-body > .aff-name-list {
  margin: 0;
}
.aff-acc-body > .aff-empty-msg {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.82rem;
  color: rgba(232, 224, 204, 0.4);
  margin: 0;
  padding: 0.5rem 0.7rem;
  text-align: center;
  border: 0.5px dashed rgba(212, 162, 74, 0.18);
  border-radius: 4px;
}
/* Le summary devient cliquable sur toute sa largeur */
.aff-accordions .aff-family > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 0.85rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  color: var(--white, #F8F2DE);
  background: rgba(11, 16, 32, 0.45);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  user-select: none;
}
.aff-accordions .aff-family > summary::-webkit-details-marker { display: none; }
.aff-accordions .aff-family > summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--mono, monospace);
  font-size: 1.15rem;
  color: var(--accent-bright, #D4A24A);
}
.aff-accordions .aff-family[open] > summary::after { content: '−'; }
.aff-accordions .aff-family {
  margin: 0;
  border: 0.5px solid rgba(212, 162, 74, 0.15);
  border-radius: 5px;
  overflow: hidden;
}
.aff-accordions .aff-family[open] {
  border-color: rgba(212, 162, 74, 0.32);
}

/* ============================================================
   v78.28 · Progressions au format toggle-box (Voir les transits du jour)
   Quelques règles d'ajustement quand on hérite de .transits-active.
   ============================================================ */
.progressions-active {
  /* hérite déjà du padding-top + border-top de .transits-active */
}
.progressions-active .progressions-control {
  margin-bottom: 1rem;
}
.progressions-active #progressions-content .progressions-meta {
  margin-top: 0;
}

/* Empêche l'ancien sélecteur .progressions-toggle d'attraper le nouveau toggle-box */
.transits-toggle-box.progressions-toggle { all: revert; }

/* ============================================================
   v78.29 · Mode "thème solaire" (heure de naissance inconnue)
   ============================================================ */
.solar-chart-banner {
  background: linear-gradient(135deg, rgba(217, 184, 110, 0.12), rgba(28, 37, 73, 0.45));
  border: 0.5px solid rgba(217, 184, 110, 0.4);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.6rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.solar-chart-banner-full {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
}
.solar-chart-pill {
  display: inline-block;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #F4D58A, #D4A24A 50%, #8E6420);
  color: #1B2240;
  padding: 0.35rem 0.85rem;
  border-radius: 3px;
  font-weight: 500;
  flex-shrink: 0;
}
.solar-chart-banner p {
  margin: 0;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--white-dim, rgba(232, 224, 204, 0.85));
  flex: 1 1 280px;
  min-width: 0;
}
.solar-chart-banner strong {
  color: var(--accent-bright, #D4A24A);
  font-weight: 500;
}

/* Big 3 en mode solaire : 2 colonnes au lieu de 3 */
.big-3.big-3-solar {
  grid-template-columns: 1fr 1fr;
}
.big-3-disclaim {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: rgba(212, 162, 74, 0.7);
  text-transform: uppercase;
  margin-left: 0.3rem;
}

/* Colonne maison du tableau des positions en mode solaire */
.col-house-na {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  color: rgba(232, 224, 204, 0.4);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  cursor: help;
}

@media (max-width: 540px) {
  .solar-chart-banner {
    flex-direction: column;
    padding: 0.85rem 1rem;
  }
  .big-3.big-3-solar { grid-template-columns: 1fr; }
}

/* ============================================================
   v78.31 · MOBILE NAV : logo centré, hamburger décollé, liens centrés
   ============================================================ */
@media (max-width: 720px) {
  /* Conteneur nav : on dégage de la place pour positionner le hamburger en absolute */
  .site-nav-inner {
    position: relative;
    justify-content: center;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
  /* Logo centré horizontalement */
  .brand {
    margin: 0 auto;
    flex: 0 0 auto;
  }
  /* Hamburger : positionné en absolute, décollé du bord */
  .nav-toggle {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    margin: 0;
  }
  /* Menu déployé : tous les liens centrés */
  .nav-links a {
    text-align: center;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ============================================================
   v78.31 · MOBILE FOOTER : recentrer tous les blocs
   ============================================================ */
@media (max-width: 720px) {
  .site-footer .footer-grid {
    text-align: center;
  }
  .site-footer .footer-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-brand {
    margin-left: auto;
    margin-right: auto;
  }
  .footer-meta,
  .footer-grid p,
  .footer-col h4,
  .footer-col ul {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-col ul {
    list-style: none;
    padding: 0;
  }
  .footer-col li {
    text-align: center;
  }
  .footer-bottom {
    align-items: center !important;
    text-align: center !important;
  }
}

/* ============================================================
   v78.31 · GRIMOIRE CTA : nouvelle proposition C
   Texte centré + 4 cartes cliquables vers les piliers
   ============================================================ */
.grimoire-cta-band {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.grimoire-cta-head {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.grimoire-cta-head .meta-label {
  display: block;
  margin-bottom: 0.8rem;
}
.grimoire-cta-pull {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.35;
  font-weight: 300;
  color: var(--white, #F8F2DE);
  margin: 0 0 0.8rem;
  letter-spacing: -0.005em;
}
.grimoire-cta-pull em {
  color: var(--accent-bright, #D4A24A);
  font-style: italic;
  font-weight: 400;
}
.grimoire-cta-attr {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 162, 74, 0.85);
  margin: 0;
}

/* Stack des 4 cartes */
.grimoire-cta-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 2.5rem;
}

/* Carte individuelle */
.grimoire-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.4rem 1rem 1.6rem;
  background: linear-gradient(180deg, rgba(28, 37, 73, 0.4) 0%, rgba(11, 16, 32, 0.6) 100%);
  border: 0.5px solid rgba(212, 162, 74, 0.30);
  border-radius: 6px;
  text-decoration: none;
  min-height: 240px;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  overflow: hidden;
}
.grimoire-cta-card:hover,
.grimoire-cta-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(212, 162, 74, 0.65);
  background: linear-gradient(180deg, rgba(28, 37, 73, 0.55) 0%, rgba(11, 16, 32, 0.75) 100%);
  outline: none;
}
.grimoire-cta-eyebrow {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 162, 74, 0.95);
  margin-bottom: 1.1rem;
}
.grimoire-cta-arrow {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: var(--mono, monospace);
  font-size: 1.1rem;
  color: rgba(212, 162, 74, 0.75);
  transition: transform 0.22s ease, color 0.22s ease;
}
.grimoire-cta-card:hover .grimoire-cta-arrow {
  transform: translateX(3px);
  color: var(--accent-bright, #D4A24A);
}

/* Glyphes Planètes & Signes · typographie dorée unifiée */
.grimoire-cta-glyphs {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.35rem 1.2rem;
  font-family: 'DejaVu Sans', 'Apple Symbols', 'Segoe UI Symbol', serif;
  font-size: 1.5rem;
  line-height: 1.1;
  background: linear-gradient(to bottom, #F5DCA3 0%, #C8A25C 55%, #5E4316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-align: center;
}
.grimoire-cta-glyphs span {
  display: inline-block;
}

/* Maisons : chiffres romains, même rendu doré */
.grimoire-cta-romans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem 0.8rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.05rem;
  font-weight: 400;
  background: linear-gradient(to bottom, #F5DCA3 0%, #C8A25C 55%, #5E4316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-align: center;
}
.grimoire-cta-romans span {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Aspects : petit thème symbolique + glyphes d'aspects */
.grimoire-cta-aspects {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.grimoire-cta-aspects svg {
  width: 100px;
  height: 100px;
}
.grimoire-cta-aspects-glyphs {
  display: flex;
  gap: 0.55rem;
  font-family: 'DejaVu Sans', 'Apple Symbols', 'Segoe UI Symbol', serif;
  font-size: 1.05rem;
  background: linear-gradient(to bottom, #F5DCA3 0%, #C8A25C 55%, #5E4316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Sabians : grille de degrés */
.grimoire-cta-sabians {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem 0.6rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  font-weight: 400;
  background: linear-gradient(to bottom, #F5DCA3 0%, #C8A25C 55%, #5E4316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-align: center;
}
.grimoire-cta-sabians span {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Fallback pour navigateurs sans background-clip:text */
@supports not (background-clip: text) {
  .grimoire-cta-glyphs,
  .grimoire-cta-romans,
  .grimoire-cta-aspects-glyphs,
  .grimoire-cta-sabians {
    color: #D4A24A;
    -webkit-text-fill-color: #D4A24A;
    background: transparent;
  }
}

.grimoire-cta-foot {
  text-align: center;
  margin-top: 1rem;
}

/* Responsive : 2x2 puis 1 colonne */
@media (max-width: 900px) {
  .grimoire-cta-stack {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .grimoire-cta-stack {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
  .grimoire-cta-card {
    min-height: 180px;
    padding: 1.2rem 1rem 1.4rem;
  }
  .grimoire-cta-glyphs {
    grid-template-columns: repeat(4, auto);
    gap: 0.3rem 0.9rem;
    font-size: 1.4rem;
  }
  .grimoire-cta-romans {
    grid-template-columns: repeat(6, 1fr);
  }
  .grimoire-cta-sabians {
    grid-template-columns: repeat(5, 1fr);
  }
  .grimoire-cta-aspects svg {
    width: 84px;
    height: 84px;
  }
}

/* ============================================================
   v78.32 · Refonte accueil : 6 nouveaux modules
   ============================================================ */

/* Section générique */
.home-section {
  padding: clamp(3.5rem, 6vw, 5rem) 0;
  border-top: 0.5px solid rgba(212, 162, 74, 0.12);
}
.home-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}
.home-section-head .meta-label {
  display: block;
  margin-bottom: 0.7rem;
}
.home-section-head h2 {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 300;
  color: var(--white, #F8F2DE);
  margin: 0 0 0.7rem;
  letter-spacing: -0.01em;
}
.home-section-head h2 em {
  color: var(--accent-bright, #D4A24A);
  font-style: italic;
  font-weight: 400;
}
.home-section-sub {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(232, 224, 204, 0.7);
  margin: 0 auto;
  max-width: 600px;
}

/* === 02 / Ciel maintenant === */
.home-sky-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
.home-sky-wheel {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.home-sky-wheel svg { width: 100%; height: auto; }
.home-sky-loading {
  text-align: center;
  font-family: var(--mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(212, 162, 74, 0.6);
  padding: 4rem 0;
}
.home-sky-side {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.home-sky-moment .meta-label {
  font-size: 0.7rem;
}
.home-sky-planets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
.hs-planet {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: baseline;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  color: var(--white, #F8F2DE);
}
.hs-glyph {
  font-size: 1.15rem;
  color: var(--accent-bright, #D4A24A);
}
.hs-pos {
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  color: rgba(212, 162, 74, 0.85);
  letter-spacing: 0.02em;
}
.home-sky-moon {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 1rem;
  background: rgba(28, 37, 73, 0.4);
  border: 0.5px solid rgba(212, 162, 74, 0.25);
  border-radius: 6px;
}
.home-moon-shape svg { width: 56px; height: 56px; }
.home-moon-name {
  display: block;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1rem;
  color: var(--white, #F8F2DE);
}
.home-moon-meta {
  display: block;
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(232, 224, 204, 0.65);
  margin-top: 0.15rem;
}

/* === 03 / Nés un X === */
.home-bdays-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto 1.5rem;
}
.home-bdays-loading,
.home-bdays-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  color: rgba(212, 162, 74, 0.65);
  padding: 2rem 0;
}
.hb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.2rem 1rem 1.3rem;
  background: rgba(28, 37, 73, 0.4);
  border: 0.5px solid rgba(212, 162, 74, 0.22);
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.hb-card:hover,
.hb-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(212, 162, 74, 0.55);
  background: rgba(28, 37, 73, 0.6);
  outline: none;
}
.hb-card-name {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.05rem;
  color: var(--white, #F8F2DE);
  text-align: center;
}
.hb-card-glyphs {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  font-family: 'DejaVu Sans', 'Apple Symbols', serif;
  font-size: 1.5rem;
  background: linear-gradient(to bottom, #F4D58A 0%, #D4A24A 50%, #8E6420 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hb-asc {
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(212, 162, 74, 0.85);
  background: none;
  -webkit-text-fill-color: initial;
}
.hb-card-tag {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(232, 224, 204, 0.6);
  text-align: center;
  line-height: 1.3;
}
.home-bdays-foot {
  text-align: center;
  margin: 0;
}

/* === 05 / Galerie 808 === */
.home-gallery-search {
  position: relative;
  max-width: 600px;
  margin: 0 auto 1rem;
}
#home-gallery-input {
  width: 100%;
  padding: 0.95rem 1.2rem;
  background: rgba(28, 37, 73, 0.6);
  border: 0.5px solid rgba(212, 162, 74, 0.35);
  border-radius: 6px;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1rem;
  color: var(--white, #F8F2DE);
}
#home-gallery-input:focus {
  outline: none;
  border-color: var(--accent-bright, #D4A24A);
  box-shadow: 0 0 0 3px rgba(212, 162, 74, 0.15);
}
.home-gallery-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(11, 16, 32, 0.98);
  border: 0.5px solid rgba(212, 162, 74, 0.4);
  border-radius: 6px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 50;
}
.hg-suggest-item {
  display: block;
  padding: 0.7rem 1rem;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(212, 162, 74, 0.1);
}
.hg-suggest-item:last-child { border-bottom: none; }
.hg-suggest-item:hover {
  background: rgba(212, 162, 74, 0.08);
}
.hg-suggest-name {
  display: block;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  color: var(--white, #F8F2DE);
}
.hg-suggest-meta {
  display: block;
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  color: rgba(212, 162, 74, 0.75);
  letter-spacing: 0.03em;
  margin-top: 0.15rem;
}
.hg-empty {
  padding: 1rem;
  text-align: center;
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  color: rgba(232, 224, 204, 0.5);
  margin: 0;
}
.home-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}
.hg-filter {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright, #D4A24A);
  border: 0.5px solid rgba(212, 162, 74, 0.4);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hg-filter:hover {
  background: rgba(212, 162, 74, 0.12);
  border-color: rgba(212, 162, 74, 0.7);
}
.home-gallery-foot {
  text-align: center;
  margin: 1.5rem 0 0;
}

/* === 06 / Analyse hebdomadaire === */
.home-analysis-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
  background: rgba(28, 37, 73, 0.3);
  border: 0.5px solid rgba(212, 162, 74, 0.2);
  border-radius: 6px;
}
.home-analysis-visual {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 5/6;
}
.home-analysis-visual svg { width: 100%; height: auto; display: block; }
.home-analysis-eyebrow {
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-bright, #D4A24A);
  margin: 0 0 0.7rem;
}
.home-analysis-title {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 300;
  color: var(--white, #F8F2DE);
  margin: 0 0 0.8rem;
  line-height: 1.3;
}
.home-analysis-lede {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(232, 224, 204, 0.85);
  margin: 0 0 1.2rem;
}
.home-analysis-lede em {
  color: rgba(212, 162, 74, 0.9);
  font-style: italic;
}

/* === 07 / Transits en cours === */
.home-transits-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.5rem;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.home-transit-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  background: rgba(28, 37, 73, 0.3);
  border: 0.5px solid rgba(212, 162, 74, 0.15);
  border-radius: 6px;
}
.ht-glyph {
  font-family: 'DejaVu Sans', 'Apple Symbols', serif;
  font-size: 2rem;
  color: var(--accent-bright, #D4A24A);
  text-align: center;
}
.ht-title {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.1rem;
  color: var(--white, #F8F2DE);
  margin: 0 0 0.25rem;
}
.ht-meta {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(232, 224, 204, 0.65);
  margin: 0;
  line-height: 1.4;
}
.home-transits-foot { text-align: center; margin: 0; }

/* === 10 / FAQ === */
.home-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 760px;
  margin: 0 auto;
}
.home-faq-item {
  border: 0.5px solid rgba(212, 162, 74, 0.18);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(28, 37, 73, 0.25);
}
.home-faq-item[open] {
  border-color: rgba(212, 162, 74, 0.4);
}
.home-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1.2rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1rem;
  color: var(--white, #F8F2DE);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  user-select: none;
}
.home-faq-item > summary::-webkit-details-marker { display: none; }
.home-faq-item > summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--mono, monospace);
  font-size: 1.3rem;
  color: var(--accent-bright, #D4A24A);
  transition: transform 0.2s ease;
}
.home-faq-item[open] > summary::after { content: '−'; }
.home-faq-body {
  padding: 0 1.2rem 1.1rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(232, 224, 204, 0.85);
}
.home-faq-body p { margin: 0 0 0.7rem; }
.home-faq-body p:last-child { margin: 0; }
.home-faq-body a {
  color: var(--accent-bright, #D4A24A);
  text-decoration: underline;
  text-decoration-color: rgba(212, 162, 74, 0.4);
}
.home-faq-body strong { color: var(--white, #F8F2DE); font-weight: 500; }

/* === Responsive === */
@media (max-width: 900px) {
  .home-sky-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .home-bdays-grid { grid-template-columns: repeat(2, 1fr); }
  .home-analysis-card {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .home-analysis-visual {
    max-width: 180px;
    margin: 0 auto;
  }
}
@media (max-width: 540px) {
  .home-bdays-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
  .home-transit-row { grid-template-columns: 40px 1fr; padding: 0.85rem 1rem; gap: 0.8rem; }
  .ht-glyph { font-size: 1.5rem; }
}

/* ============================================================
   v78.33 · Refonte v2 : mini-TOC + regroupements
   ============================================================ */

/* === Mini-TOC flottant droite (desktop seulement) === */
.home-toc {
  position: fixed;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 200px;
  padding: 1rem 1rem 1rem 1.2rem;
  background: rgba(11, 16, 32, 0.85);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 0.5px solid rgba(212, 162, 74, 0.25);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 30;
}
.home-toc.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.home-toc-label {
  display: block;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(212, 162, 74, 0.65);
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 0.5px solid rgba(212, 162, 74, 0.18);
}
.home-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tocnum;
}
.home-toc-list li {
  counter-increment: tocnum;
  margin: 0;
}
.home-toc-list a {
  display: block;
  padding: 0.4rem 0;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.82rem;
  color: rgba(232, 224, 204, 0.6);
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
  position: relative;
}
.home-toc-list a::before {
  content: counter(tocnum, decimal-leading-zero);
  font-family: var(--mono, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: rgba(212, 162, 74, 0.4);
  margin-right: 0.6rem;
}
.home-toc-list a:hover {
  color: var(--white, #F8F2DE);
  padding-left: 4px;
}
.home-toc-list a.is-active {
  color: var(--accent-bright, #D4A24A);
  padding-left: 4px;
}
.home-toc-list a.is-active::before {
  color: var(--accent-bright, #D4A24A);
}
@media (max-width: 1100px) {
  .home-toc { display: none; }
}

/* === 02b · Layout 3 zones (cadran / lune / transits) === */
.home-sky-3grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}
.home-sky-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1.5rem 1.3rem 1.6rem;
  background: rgba(28, 37, 73, 0.32);
  border: 0.5px solid rgba(212, 162, 74, 0.22);
  border-radius: 6px;
  text-align: center;
}
.home-sky-block-label {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 162, 74, 0.85);
}
.home-sky-block-wheel .home-sky-wheel {
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
}
.home-sky-block-wheel .home-sky-planets {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  width: 100%;
  display: grid;
  gap: 0.35rem;
}
.home-sky-block-wheel .hs-planet {
  grid-template-columns: auto 1fr auto;
  font-size: 0.85rem;
}
.home-sky-block-wheel .home-sky-date {
  font-size: 0.7rem;
  margin: 0;
}
.home-sky-link {
  margin-top: auto;
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright, #D4A24A);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(212, 162, 74, 0.4);
  padding-bottom: 2px;
}
.home-sky-link:hover { border-bottom-color: var(--accent-bright, #D4A24A); }

.home-sky-block-moon .home-moon-shape svg { width: 96px; height: 96px; }
.home-sky-block-moon .home-moon-name {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.15rem;
  color: var(--white, #F8F2DE);
  margin-top: 0.4rem;
}
.home-sky-block-moon .home-moon-meta {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(212, 162, 74, 0.85);
}
.home-moon-explain {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(232, 224, 204, 0.55);
  margin: 0.6rem 0 0;
  max-width: 220px;
}

.home-sky-block-transits {
  text-align: left;
  align-items: stretch;
}
.home-sky-block-transits .home-sky-block-label { text-align: center; }
.home-sky-block-transits .home-transits-list {
  margin: 0;
  gap: 0.4rem;
}
.home-sky-block-transits .home-transit-row {
  background: transparent;
  border: 0;
  padding: 0.4rem 0;
  border-bottom: 0.5px dashed rgba(212, 162, 74, 0.12);
  grid-template-columns: 36px 1fr;
}
.home-sky-block-transits .home-transit-row:last-child { border-bottom: 0; }
.home-sky-block-transits .ht-glyph { font-size: 1.4rem; }
.home-sky-block-transits .ht-title { font-size: 0.95rem; margin: 0 0 0.1rem; }
.home-sky-block-transits .ht-meta { font-size: 0.78rem; }

/* Responsive : sur tablette 3→1 colonne avec spans intelligents */
@media (max-width: 1000px) {
  .home-sky-3grid { grid-template-columns: 1fr; }
}

/* === 03 · Onglets module "Les figures" === */
.home-figures-tabs {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin: 0 auto 1.6rem;
  flex-wrap: wrap;
}
.home-tab {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(232, 224, 204, 0.6);
  background: transparent;
  border: 0.5px solid rgba(212, 162, 74, 0.3);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.home-tab:hover {
  color: var(--white, #F8F2DE);
  border-color: rgba(212, 162, 74, 0.6);
}
.home-tab.is-active {
  background: rgba(212, 162, 74, 0.15);
  color: var(--accent-bright, #D4A24A);
  border-color: var(--accent-bright, #D4A24A);
}
.home-figures-panel { display: none; }
.home-figures-panel.is-active { display: block; }
/* ============================================================
   v78.39 · Menu latéral · aération supplémentaire (override v78.38)
   Bloc UNIQUE qui remplace v78.34, v78.35, v78.36, v78.37 et v78.38.
   Roue zodiacale native via Astrologie.drawChart (cf. side-menu.js).
   3 paliers responsive selon la hauteur de l'écran.
   ============================================================ */

.side-menu { display: none; }

@media (min-width: 1101px) {
  .site-nav { display: none !important; }
  body { padding-left: 320px; }

  .side-menu {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem 1.5rem 1.2rem !important;
    background: rgba(7, 9, 24, 0.96);
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    border-right: 0.5px solid rgba(212, 162, 74, 0.18);
    z-index: 50;
    font-family: var(--serif, 'Fraunces', serif);
    gap: 0 !important;
  }
  .side-menu::-webkit-scrollbar { width: 4px; }
  .side-menu::-webkit-scrollbar-track { background: transparent; }
  .side-menu::-webkit-scrollbar-thumb {
    background: rgba(212, 162, 74, 0.18);
    border-radius: 2px;
  }

  /* BRAND : logo + tagline réintroduite, sobre */
  .sm-brand {
    padding: 0 !important;
    margin: 0 0 0.9rem !important;
    border: none !important;
  }
  .sm-brand-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    text-decoration: none;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em;
  }
  .sm-tagline {
    display: block !important;
    margin: 0.3rem 0 0 !important;
    font-family: var(--serif, 'Fraunces', serif);
    font-style: italic;
    font-size: 0.74rem !important;
    color: rgba(232, 224, 204, 0.55);
    line-height: 1.3;
  }

  /* MON ESPACE / CRÉER UN COMPTE : bouton proéminent sous le logo */
  .sm-account {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 0 0 1.25rem !important;
    padding: 0.7rem 1rem !important;
    font-family: var(--mono, 'IBM Plex Mono', monospace);
    font-size: 0.75rem !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--accent-bright, #D4A24A);
    border: 0.5px solid rgba(212, 162, 74, 0.5);
    border-radius: 3px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  .sm-account-glyph {
    font-size: 0.95rem;
    color: rgba(212, 162, 74, 0.85);
    line-height: 1;
  }
  .sm-account:hover {
    background: rgba(212, 162, 74, 0.12);
    color: #F4D58A;
    border-color: var(--accent-bright, #D4A24A);
  }

  /* NAV : sections aérées */
  .sm-nav {
    display: flex !important;
    flex-direction: column;
    gap: 1.15rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sm-section { margin: 0 !important; padding: 0 !important; }
  .sm-section ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sm-section li { margin: 0 !important; padding: 0 !important; }
  .sm-section-label {
    display: block;
    font-family: var(--mono, 'IBM Plex Mono', monospace);
    font-size: 0.64rem !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(212, 162, 74, 0.78);
    margin: 0 0 0.45rem !important;
    line-height: 1.2 !important;
  }
  .sm-section a {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.35rem 0 !important;
    margin: 0 !important;
    font-family: var(--serif, 'Fraunces', serif);
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: rgba(232, 224, 204, 0.82);
    text-decoration: none;
    transition: color 0.18s ease, padding-left 0.18s ease;
  }
  .sm-section a em {
    font-family: 'DejaVu Sans', 'Apple Symbols', serif;
    font-style: normal;
    font-size: 1rem;
    color: rgba(212, 162, 74, 0.65);
    flex-shrink: 0;
  }
  .sm-section a:hover { color: var(--white, #F8F2DE); padding-left: 5px !important; }
  .sm-section a:hover em { color: var(--accent-bright, #D4A24A); }
  .sm-section a.is-active { color: var(--accent-bright, #D4A24A); padding-left: 8px !important; }
  .sm-section a.is-active::before {
    content: '';
    position: absolute;
    left: -1.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5px;
    height: 55%;
    background: linear-gradient(to bottom, #F4D58A, #D4A24A 50%, #8E6420);
    border-radius: 1.25px;
  }
  .sm-section a.is-active em { color: var(--accent-bright, #D4A24A); }

  /* CIEL ACTUEL : roue native drawChart contrainte à 180px */
  .sm-sky-preview {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    margin: 1.3rem 0 0 !important;
    padding: 1.1rem 0 0 !important;
    border-top: 0.5px solid rgba(212, 162, 74, 0.18);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .sm-sky-preview:hover { transform: translateY(-1px); opacity: 0.92; }
  .sm-sky-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    margin: 0 0 0.35rem !important;
  }
  .sm-sky-label {
    font-family: var(--mono, monospace);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(212, 162, 74, 0.78);
  }
  .sm-sky-date {
    font-family: var(--mono, monospace);
    font-size: 0.6rem;
    color: rgba(232, 224, 204, 0.6);
  }
  .sm-sky-wheel {
    width: 180px;
    height: 180px;
    display: block;
    overflow: hidden;
  }
  .sm-sky-wheel svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
  .sm-sky-meta {
    list-style: none;
    padding: 0;
    margin: 0.3rem 0 0 !important;
    display: flex;
    gap: 0.85rem;
    font-family: var(--serif, 'Fraunces', serif);
    font-size: 0.78rem;
    color: rgba(232, 224, 204, 0.82);
  }
  .sm-sky-meta li { white-space: nowrap; margin: 0; padding: 0; }
  .sm-sky-meta span {
    color: var(--accent-bright, #D4A24A);
    font-style: italic;
  }

  /* INSTAGRAM : bouton sobre tout en bas */
  .sm-instagram {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 1.05rem 0 0 !important;
    padding: 0.6rem 0.9rem !important;
    font-family: var(--mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: lowercase;
    text-decoration: none;
    color: rgba(232, 224, 204, 0.78);
    border: 0.5px solid rgba(212, 162, 74, 0.25);
    border-radius: 3px;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }
  .sm-instagram svg { display: block; width: 20px; height: 20px; }
  .sm-instagram:hover {
    color: var(--accent-bright, #D4A24A);
    border-color: var(--accent-bright, #D4A24A);
    background: rgba(212, 162, 74, 0.08);
  }

  /* Neutralise blocs hérités */
  .sm-cosmos, .sm-cta, .sm-foot { display: none !important; }

  .site-footer { margin-left: 0; }
}

/* PALIER 2 : hauteur d'écran intermédiaire (750-899 px) */
@media (min-width: 1101px) and (max-height: 899px) {
  .side-menu { padding: 0.85rem 1.2rem 0.85rem !important; }
  .sm-brand { margin-bottom: 0.55rem !important; }
  .sm-tagline { font-size: 0.7rem !important; margin-top: 0.15rem !important; }
  .sm-account { margin-bottom: 0.75rem !important; padding: 0.45rem 0.8rem !important; font-size: 0.68rem !important; }
  .sm-nav { gap: 0.6rem !important; }
  .sm-section-label { margin-bottom: 0.2rem !important; }
  .sm-section a { padding: 0.16rem 0 !important; font-size: 0.9rem !important; }
  .sm-sky-preview { margin-top: 0.75rem !important; padding-top: 0.65rem !important; }
  .sm-sky-wheel { width: 160px; height: 160px; }
  .sm-sky-meta { font-size: 0.74rem; }
  .sm-instagram { margin-top: 0.7rem !important; padding: 0.42rem 0.7rem !important; font-size: 0.64rem; }
}

/* PALIER 3 : écran court (< 750 px), compacité maximale, textes restent lisibles */
@media (min-width: 1101px) and (max-height: 749px) {
  .side-menu { padding: 0.7rem 1.1rem 0.7rem !important; }
  .sm-brand { margin-bottom: 0.4rem !important; }
  .sm-brand-link { font-size: 1.1rem !important; }
  .sm-tagline { display: none !important; }
  .sm-account { margin-bottom: 0.55rem !important; padding: 0.38rem 0.7rem !important; font-size: 0.64rem !important; }
  .sm-nav { gap: 0.4rem !important; }
  .sm-section-label { font-size: 0.58rem !important; margin-bottom: 0.12rem !important; }
  .sm-section a { padding: 0.1rem 0 !important; font-size: 0.85rem !important; }
  .sm-sky-preview { margin-top: 0.55rem !important; padding-top: 0.5rem !important; }
  .sm-sky-wheel { width: 140px; height: 140px; }
  .sm-sky-meta { font-size: 0.72rem; margin-top: 0.22rem !important; }
  .sm-instagram { margin-top: 0.55rem !important; padding: 0.35rem 0.6rem !important; font-size: 0.6rem; }
}

/* MOBILE : encart compact en bas, juste cadran + Insta */
@media (max-width: 1100px) {
  .side-menu {
    display: block !important;
    position: static;
    width: 100%;
    max-width: 380px;
    margin: 2rem auto 0;
    padding: 1rem 1.2rem 1.2rem !important;
    background: rgba(7, 9, 24, 0.55);
    border: 0.5px solid rgba(212, 162, 74, 0.18);
    border-radius: 6px;
    font-family: var(--serif, 'Fraunces', serif);
  }
  .side-menu .sm-brand,
  .side-menu .sm-account,
  .side-menu .sm-nav,
  .side-menu .sm-cosmos,
  .side-menu .sm-cta,
  .side-menu .sm-foot { display: none !important; }
  .side-menu .sm-sky-preview {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  .side-menu .sm-sky-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .side-menu .sm-sky-label {
    font-family: var(--mono, monospace);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(212, 162, 74, 0.78);
  }
  .side-menu .sm-sky-date {
    font-family: var(--mono, monospace);
    font-size: 0.65rem;
    color: rgba(232, 224, 204, 0.6);
  }
  .side-menu .sm-sky-wheel {
    width: 220px;
    height: 220px;
    overflow: hidden;
  }
  .side-menu .sm-sky-wheel svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
  .side-menu .sm-sky-meta {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(232, 224, 204, 0.82);
  }
  .side-menu .sm-sky-meta span {
    color: var(--accent-bright, #D4A24A);
    font-style: italic;
  }
  .side-menu .sm-instagram {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem auto 0;
    padding: 0.55rem 1rem;
    font-family: var(--mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-decoration: none;
    color: rgba(232, 224, 204, 0.82);
    border: 0.5px solid rgba(212, 162, 74, 0.3);
    border-radius: 3px;
    width: max-content;
  }
  .side-menu .sm-instagram svg { width: 20px; height: 20px; }
  .side-menu .sm-instagram:hover {
    color: var(--accent-bright, #D4A24A);
    border-color: var(--accent-bright, #D4A24A);
  }
}

/* ============================================================
   v78.42 · Home : bloc Cabinet de Palazzo (newsletter gratuite)
   ============================================================ */
#home-palazzo {
  padding: 4rem 0 5rem;
  position: relative;
}

.palazzo-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2.4rem;
  align-items: center;
  padding: 2.8rem 3rem;
  background: linear-gradient(135deg, rgba(20, 28, 56, 0.85) 0%, rgba(11, 13, 26, 0.95) 100%);
  border: 1px solid rgba(212, 162, 74, 0.25);
  border-radius: 8px;
  position: relative;
}
.palazzo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent-bright, #D4A24A), transparent);
}

.palazzo-card-portrait {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid var(--accent-bright, #D4A24A);
  overflow: hidden;
  background: rgba(20, 28, 56, 0.6);
  box-shadow: 0 8px 32px rgba(212, 162, 74, 0.18);
  justify-self: center;
}
.palazzo-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.palazzo-card-body .meta-label {
  display: block;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright, #D4A24A);
  margin: 0 0 0.7rem;
}
.palazzo-card-body h2 {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1.2rem;
  color: var(--white, #F8F2DE);
}
.palazzo-card-body h2 em {
  font-style: italic;
  color: var(--accent-bright, #D4A24A);
  font-weight: 500;
}

.palazzo-card-lead {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(232, 224, 204, 0.85);
  margin: 0 0 1.4rem;
}
.palazzo-card-lead em {
  font-style: italic;
  color: var(--accent-bright, #D4A24A);
}

.palazzo-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
}
.palazzo-card-features li {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(232, 224, 204, 0.78);
  margin: 0.4rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.palazzo-card-features li span {
  color: var(--accent-bright, #D4A24A);
  flex-shrink: 0;
  font-size: 0.85rem;
}

.palazzo-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0B0D1A;
  background: var(--accent-bright, #D4A24A);
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.palazzo-card-cta:hover {
  background: #F4D58A;
  transform: translateY(-1px);
}

.palazzo-card-foot {
  margin: 1.2rem 0 0;
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.82rem;
  color: rgba(232, 224, 204, 0.5);
}

/* Mobile */
@media (max-width: 720px) {
  #home-palazzo { padding: 2.5rem 0 3rem; }
  .palazzo-card {
    grid-template-columns: 1fr;
    padding: 2rem 1.6rem;
    text-align: center;
  }
  .palazzo-card-portrait { margin-bottom: 0.4rem; }
  .palazzo-card-features li { text-align: left; }
  .palazzo-card-cta { width: 100%; justify-content: center; }
}

/* v78.42b · Fallback portrait Palazzo si image manquante */
.palazzo-card-portrait { position: relative; }
.palazzo-card-portrait-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1d33 0%, #0E1124 100%);
  color: var(--accent-bright, #D4A24A);
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 4rem;
  font-weight: 500;
  border-radius: 50%;
}

/* ============================================================
   v78.43 · Toggle "afficher mot de passe" (œil)
   Marche sur tous les <input type="password">.
   ============================================================ */
.password-wrap {
  position: relative;
  display: block;
}
.password-wrap input[type="password"],
.password-wrap input[type="text"] {
  padding-right: 2.8rem !important;
}
.password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.45rem;
  margin: 0;
  cursor: pointer;
  color: rgba(232, 224, 204, 0.55);
  border-radius: 3px;
  line-height: 0;
  transition: color 0.18s ease, background 0.18s ease;
}
.password-toggle:hover {
  color: var(--accent-bright, #D4A24A);
  background: rgba(212, 162, 74, 0.1);
}
.password-toggle:focus {
  outline: none;
  color: var(--accent-bright, #D4A24A);
  background: rgba(212, 162, 74, 0.12);
  box-shadow: 0 0 0 2px rgba(212, 162, 74, 0.35);
}
.password-toggle svg { display: block; }

/* ============================================================
   v78.43 · RGPD + cookies + mot de passe oublié
   ============================================================ */
.form-row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  gap: 1rem;
}
.btn-link {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--accent-bright, #D4A24A);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: #F4D58A; }
.btn-link:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-danger {
  background: rgba(224,123,60,0.12);
  color: #E07B3C;
  border: 0.5px solid rgba(224,123,60,0.4);
}
.btn-danger:hover { background: rgba(224,123,60,0.22); border-color: #E07B3C; }

.compte-rgpd { margin-top: 2rem; }
.rgpd-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Cookie banner */
#sgastro-cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: rgba(7, 9, 24, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(212, 162, 74, 0.3);
  padding: 1.2rem 1.4rem;
  animation: slideUpCookie 0.4s ease-out;
}
@keyframes slideUpCookie {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cookie-banner-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  margin: 0;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(232, 224, 204, 0.85);
  min-width: 250px;
}
.cookie-banner-text a {
  color: var(--accent-bright, #D4A24A);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.cookie-btn-accept, .cookie-btn-deny {
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  border-radius: 3px;
  cursor: pointer;
  border: 0.5px solid;
  transition: background 0.15s ease, color 0.15s ease;
}
.cookie-btn-accept {
  background: var(--accent-bright, #D4A24A);
  color: #0B0D1A;
  border-color: var(--accent-bright, #D4A24A);
}
.cookie-btn-accept:hover { background: #F4D58A; border-color: #F4D58A; }
.cookie-btn-deny {
  background: transparent;
  color: rgba(232, 224, 204, 0.7);
  border-color: rgba(212, 162, 74, 0.3);
}
.cookie-btn-deny:hover {
  color: var(--accent-bright, #D4A24A);
  border-color: var(--accent-bright, #D4A24A);
}

/* Reset password modal */
.auth-reset-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(7, 9, 24, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-reset-card {
  background: #0B0D1A;
  border: 1px solid rgba(212, 162, 74, 0.3);
  border-radius: 6px;
  padding: 2.4rem 2rem;
  max-width: 440px;
  width: 100%;
}
.auth-reset-card h2 {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 0.8rem;
  color: var(--white, #F8F2DE);
}

@media (max-width: 600px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { width: 100%; justify-content: stretch; }
  .cookie-btn-accept, .cookie-btn-deny { flex: 1; }
}

/* ============================================================
   v78.43 · Parcours band (a-propos) + tooltips glyphes
   ============================================================ */
.parcours-band { padding: 5rem 0 6rem; }
.parcours-card {
  background: linear-gradient(135deg, rgba(20, 28, 56, 0.85) 0%, rgba(11, 13, 26, 0.95) 100%);
  border: 1px solid rgba(212, 162, 74, 0.25);
  border-radius: 8px;
  padding: 3rem 3.5rem;
  position: relative;
}
.parcours-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent-bright, #D4A24A), transparent);
}
.parcours-card .meta-label {
  display: block;
  font-family: var(--mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright, #D4A24A);
  margin: 0 0 0.7rem;
}
.parcours-card h2 {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(1.8rem, 2.8vw, 2.3rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 2rem;
  color: var(--white, #F8F2DE);
}
.parcours-card h2 em {
  font-style: italic;
  color: var(--accent-bright, #D4A24A);
  font-weight: 500;
}
.parcours-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0 0 2.5rem;
  padding: 1.5rem 0;
  border-top: 0.5px solid rgba(212, 162, 74, 0.18);
  border-bottom: 0.5px solid rgba(212, 162, 74, 0.18);
}
.parcours-stat { text-align: center; }
.parcours-stat-num {
  display: block;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--accent-bright, #D4A24A);
  line-height: 1;
}
.parcours-stat-label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 224, 204, 0.65);
}
.parcours-bio p {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(232, 224, 204, 0.85);
  margin: 0 0 1.2rem;
}
.parcours-bio em {
  font-style: italic;
  color: var(--accent-bright, #D4A24A);
}
.parcours-cta-line {
  margin: 2rem 0 0;
  text-align: center;
}
.btn-link-arrow {
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright, #D4A24A);
  text-decoration: none;
  border-bottom: 0.5px solid var(--accent-bright, #D4A24A);
  padding-bottom: 0.2rem;
  transition: color 0.18s ease;
}
.btn-link-arrow:hover { color: #F4D58A; }

@media (max-width: 720px) {
  .parcours-card { padding: 2rem 1.6rem; }
  .parcours-stats { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Tooltips glyphes astro */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11, 13, 26, 0.97);
  color: var(--accent-bright, #D4A24A);
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border: 0.5px solid rgba(212, 162, 74, 0.4);
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 100;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after,
[data-tooltip]:focus-visible::after { opacity: 1; }


/* === BADGE NOUVEAU sur Palazzo répond (v86) === */
.nav-new { position: relative; }
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-family: var(--mono, monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent-bright, #D4A24A);
  color: #0B0D1A;
  border-radius: 3px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.2;
}