/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC COMPONENTS — composants partagés (v90.25.54)
   Page pilote : palazzo-repond.html
   Rollout futur : a-propos, packs, calcul-theme-astral, grimoire, etc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ LIQUID GLASS — palette navy / or ═══════════════════════════════════ */
.cn-liquid-glass {
  background: rgba(228, 192, 126, 0.02);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px) saturate(1.1);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
  border: none;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(248,242,222,0.08), 0 1px 2px rgba(4,6,17,0.4);
}
.cn-liquid-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: 0; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(244,213,138,0.55) 0%,
    rgba(228,192,126,0.18) 20%,
    rgba(228,192,126,0) 40%,
    rgba(228,192,126,0) 60%,
    rgba(228,192,126,0.18) 80%,
    rgba(244,213,138,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.cn-liquid-glass-strong {
  background: rgba(228, 192, 126, 0.06);
  background-blend-mode: luminosity;
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px rgba(248,242,222,0.18),
    inset 0 -1px 1px rgba(142,100,32,0.15),
    0 4px 16px rgba(4,6,17,0.55),
    0 0 24px rgba(228,192,126,0.08);
}
.cn-liquid-glass-strong::before {
  content: ""; position: absolute; inset: 0; border-radius: 0; padding: 1.6px;
  background: linear-gradient(180deg,
    rgba(244,213,138,0.85) 0%,
    rgba(228,192,126,0.35) 25%,
    rgba(228,192,126,0.05) 50%,
    rgba(228,192,126,0.35) 75%,
    rgba(244,213,138,0.85) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* v90.34.2 — Bloc B : diète liquid-glass (45→6 par page)
   Les 4 audits Sprint 3 ont identifié l'abus de glassmorphism comme défaut #1.
   Par défaut, `.cn-liquid-glass-card` devient une card plate navy + bordure
   subtile (zéro blur, zéro gradient-border ::before).
   Pour réintroduire le vrai glass sur un endroit stratégique (hero CTA,
   pricing featured, form principal), ajouter la classe `.cn-glass-keep`. */
.cn-liquid-glass-card {
  background: var(--lx-surfa-55, rgba(11, 16, 32, 0.55));
  border: 1px solid var(--lx-ink-8, rgba(248, 242, 222, 0.08));
  border-radius: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(4, 6, 17, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cn-liquid-glass-card::before { content: none; display: none; }

/* Opt-in : réintroduit le vrai glass premium (ex-comportement par défaut).
   À utiliser SEULEMENT sur 6 endroits stratégiques max par page. */
.cn-liquid-glass-card.cn-glass-keep {
  background: rgba(228, 192, 126, 0.025);
  background-blend-mode: luminosity;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 1px 1px rgba(248,242,222,0.1), 0 8px 32px rgba(4,6,17,0.6);
}
.cn-liquid-glass-card.cn-glass-keep::before {
  content: ""; display: block; position: absolute; inset: 0; border-radius: 0; padding: 1.4px;
  background: linear-gradient(135deg,
    rgba(244,213,138,0.5) 0%,
    rgba(228,192,126,0.1) 30%,
    rgba(228,192,126,0) 50%,
    rgba(228,192,126,0.1) 70%,
    rgba(244,213,138,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ═══ TYPOGRAPHIE ─ kicker mono + heading serif italique ═════════════════ */
.cn-kicker {
  font-family: var(--nv-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nv-gold);
  margin: 0 0 18px;
  font-weight: 500;
}

.cn-sec-heading {
  font-family: var(--nv-font-serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-hero-h1-size, clamp(2.6rem, 8vw, 5.5rem));
  line-height: var(--t-hero-h1-lh, 0.95);
  letter-spacing: var(--t-hero-h1-ls, -0.03em);
  color: var(--nv-cream);
  margin: 0 auto 28px;
  max-width: 24ch;
  text-align: center;
}
/* v90.34.1 — Discipline italique : par défaut <em> dans h2.cn-sec-heading
   est neutralisé (sentait l'AI selon les 4 audits Sprint 3). L'italique-or
   ne reste actif que dans les contextes éditoriaux où il SIGNIFIE quelque
   chose : hero (signature), pricing (vendeur), CTA final. */
.cn-sec-heading em { color: inherit; font-style: normal; }
.pr-hero .cn-sec-heading em,
.cn-hero .cn-sec-heading em,
.cn-sec-heading--hero em,
.pr-pricing .cn-sec-heading em,
.pricing .cn-sec-heading em,
.pr-form-section .cn-sec-heading em,
.cn-em-keep,
h1 em { color: var(--nv-gold); font-style: italic; }

/* ═══ BOUTONS PILL ─ primary liquid-glass-strong + secondary ghost ═══════ */
.cn-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 0;
  font-family: var(--nv-font-body); font-size: 0.92rem; font-weight: 500;
  color: var(--nv-cream); text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cn-btn-primary svg { width: 18px; height: 18px; }
.cn-btn-primary:hover { transform: translateY(-1px); }

.cn-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--nv-cream);
  font-family: var(--nv-font-body); font-size: 0.92rem;
  text-decoration: none; padding: 12px 4px;
  transition: color 0.2s ease;
}
.cn-btn-secondary svg { width: 14px; height: 14px; }
.cn-btn-secondary:hover { color: var(--nv-gold); }

/* ═══ STEP CARD ─ utility pour cards numérotées 01/02/03 ═════════════════ */
.cn-step-card {
  padding: 2rem 1.8rem;
  display: flex; flex-direction: column;
  text-align: left;
}
.cn-step-card .cn-step-num {
  display: block;
  font-family: var(--nv-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--nv-gold);
  margin-bottom: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
}
.cn-step-card .cn-step-title {
  font-family: var(--nv-font-serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--nv-cream);
  margin: 0 0 0.9rem;
}
.cn-step-card .cn-step-title em { color: var(--nv-gold); font-style: italic; }
.cn-step-card .cn-step-body {
  font-family: var(--nv-font-body);
  font-weight: 300;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--nv-cream-mute);
  margin: 0;
}

/* ═══ SECTION VEIL ─ voile navy pour overlay sections plein écran ════════ */
.cn-section-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4,6,17,0.20) 0%,
    rgba(4,6,17,0.35) 35%,
    rgba(4,6,17,0.75) 80%,
    var(--nv-navy-deep) 100%);
}

/* ═══ HERO ─ pattern light : kicker mono + h1 italique + sub + cta ══════ */
.cn-hero {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 24px 80px;
  text-align: center;
  background: var(--nv-navy-deep);
}
.cn-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.cn-hero .cn-kicker {
  margin: 0 0 28px;
  font-size: 0.78rem;
}
.cn-hero .cn-sec-heading {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 auto 28px;
  max-width: 900px;
}
.cn-hero-sub {
  font-family: var(--nv-font-body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--nv-cream);
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}
.cn-hero-sub strong { color: var(--nv-gold); font-weight: 500; }
.cn-hero-cta-row {
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; justify-content: center;
  margin-bottom: 18px;
}
.cn-hero-foot {
  margin: 12px 0 0;
  font-family: var(--nv-font-body); font-size: 0.85rem; font-weight: 300;
  color: var(--nv-cream-mute);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   OVERRIDE FOOTER ─ reskinne `.site-footer` legacy en cinematic
   (markup conservé sur palazzo-repond.html : footer-grid / footer-brand /
    footer-col / footer-bottom). On retypographie sans toucher au HTML.
   ═══════════════════════════════════════════════════════════════════════ */
footer.site-footer {
  position: relative;
  padding: 96px 24px 48px;
  background: var(--nv-navy-deep);
  color: var(--nv-cream);
  font-family: var(--nv-font-body);
}
footer.site-footer .container {
  max-width: 1400px; margin: 0 auto; padding: 0;
}
footer.site-footer .footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 48px;
  max-width: 1400px; margin: 0 auto;
}
@media (min-width: 768px) and (max-width: 1023px) {
  footer.site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 56px; }
}
@media (min-width: 1024px) {
  footer.site-footer .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; }
}

/* Brand lockup cinematic — serif italique pour "Stephane",
   bandeau or vertical au milieu, ASTRO en majuscules dorées. */
footer.site-footer .footer-brand {
  display: inline-flex; align-items: baseline; line-height: 1;
  font-size: 1.6rem;
}
footer.site-footer .footer-brand .brand-name {
  font-family: var(--nv-font-serif); font-style: italic; font-weight: 300;
  color: var(--nv-cream); letter-spacing: -0.005em; font-size: 1em;
}
footer.site-footer .footer-brand .brand-sep {
  display: inline-block; width: 1px; height: 0.82em; margin: 0 0.22em;
  background: linear-gradient(180deg,
    var(--nv-gold-strong) 0%,
    var(--nv-gold) 50%,
    var(--nv-gold-deep) 100%);
  align-self: center; transform: translateY(0.04em);
}
footer.site-footer .footer-brand .brand-astro {
  font-family: var(--nv-font-serif); font-style: normal; font-weight: 500;
  font-size: 1em; letter-spacing: 0.05em; text-transform: uppercase;
  background: linear-gradient(180deg,
    var(--nv-gold-strong) 0%,
    var(--nv-gold) 50%,
    var(--nv-gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

footer.site-footer .footer-meta {
  font-family: var(--nv-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nv-gold-soft);
  margin-top: 10px;
}

footer.site-footer .footer-grid > div > p {
  font-family: var(--nv-font-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--nv-cream-mute);
  margin: 14px 0 0;
  max-width: 38ch;
}

footer.site-footer .footer-col h4 {
  font-family: var(--nv-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nv-gold);
  margin: 0 0 18px;
  font-weight: 500;
}
footer.site-footer .footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
footer.site-footer .footer-col a {
  font-family: var(--nv-font-body);
  font-size: 0.88rem;
  color: var(--nv-cream-mute);
  text-decoration: none;
  transition: color 0.2s;
}
footer.site-footer .footer-col a:hover { color: var(--nv-gold); }

footer.site-footer .footer-bottom {
  max-width: 1400px; margin: 56px auto 0; padding-top: 28px;
  border-top: 1px solid var(--lx-goldink-1, rgba(228,192,126,0.1));
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
  font-family: var(--nv-font-body);
  font-size: 0.78rem;
  color: var(--nv-cream-faint);
}
footer.site-footer .footer-bottom a {
  color: var(--nv-cream-faint);
  text-decoration: none;
  transition: color 0.2s;
}
footer.site-footer .footer-bottom a:hover { color: var(--nv-gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   v90.26.0 — 13 NOUVEAUX COMPOSANTS pour le rollout total
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ FORM — calculateurs natal mono ═════════════════════════════════════ */
.cn-form {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 32px;
  border-radius: 0;
}
.cn-form-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; padding-bottom: 18px;
  border-bottom: 1px solid var(--lx-goldink-12, rgba(228, 192, 126, 0.12));
}
.cn-form-head-label {
  font-family: var(--nv-font-mono); font-size: 0.74rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nv-gold);
}
.cn-form-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 768px) { .cn-form-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.cn-form-row {
  display: flex; flex-direction: column; gap: 20px;
}
.cn-form-field { display: flex; flex-direction: column; gap: 6px; }
.cn-form-label {
  font-family: var(--nv-font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--nv-gold-soft);
}
.cn-form-input,
.cn-form input[type="text"],
.cn-form input[type="email"],
.cn-form input[type="date"],
.cn-form input[type="time"],
.cn-form input[type="password"],
.cn-form select,
.cn-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--lx-goldink-3, rgba(228, 192, 126, 0.30));
  padding: 8px 0;
  color: var(--nv-cream);
  font-family: var(--nv-font-serif-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.3;
  width: 100%;
  outline: none;
  transition: border-color 0.18s;
}
.cn-form-input:focus,
.cn-form input:focus,
.cn-form select:focus,
.cn-form textarea:focus { border-bottom-color: var(--nv-gold-strong); }
.cn-form-hint {
  font-family: var(--nv-font-body); font-weight: 300;
  font-size: 0.82rem; color: var(--nv-cream-mute);
  margin-top: 4px;
}
.cn-form-footer {
  margin-top: 28px; display: flex; flex-direction: column; gap: 20px;
}
.cn-form-actions {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}

/* ═══ FORM DOUBLE — synastrie / potentiel / compatibilités ════════════ */
.cn-form-double {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  max-width: 1200px; margin: 0 auto;
}
@media (min-width: 1024px) {
  .cn-form-double { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.cn-form-double > .cn-form { max-width: none; }
.cn-form-double-person-label {
  font-family: var(--nv-font-mono); font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nv-gold); margin-bottom: 8px;
}

/* ═══ RESULT SECTION + RESULT CARD ════════════════════════════════════ */
.cn-result-section {
  padding: 80px 24px;
  max-width: 1200px; margin: 0 auto;
}
@media (min-width: 768px) { .cn-result-section { padding: 100px 32px; } }
.cn-result-card {
  border-radius: 0;
  padding: 36px 28px;
  margin-bottom: 28px;
}
@media (min-width: 768px) { .cn-result-card { padding: 44px 36px; } }
.cn-result-card h2,
.cn-result-card h3 {
  font-family: var(--nv-font-serif-display); font-style: italic;
  font-weight: 400; color: var(--nv-cream); line-height: 1.1;
  margin: 0 0 16px;
}
.cn-result-card h2 em,
.cn-result-card h3 em { color: var(--nv-gold); font-style: italic; }
.cn-result-card p {
  font-family: var(--nv-font-body); font-weight: 300;
  font-size: 1rem; line-height: 1.6;
  color: var(--nv-cream-mute);
}

/* ═══ PACK CARD — formules de consultation ═══════════════════════════ */
.cn-pack-card {
  border-radius: 0;
  padding: 36px 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.cn-pack-card-kicker {
  font-family: var(--nv-font-mono); font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nv-gold);
}
.cn-pack-card-title {
  font-family: var(--nv-font-serif-display); font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.05;
  color: var(--nv-cream); margin: 0;
}
.cn-pack-card-title em { color: var(--nv-gold); font-style: italic; }
.cn-pack-card-price {
  font-family: var(--nv-font-serif-display); font-style: italic;
  font-size: 2.6rem; line-height: 1; color: var(--nv-cream);
  display: flex; align-items: baseline; gap: 4px;
}
.cn-pack-card-price-currency { font-size: 1.4rem; color: var(--nv-gold-soft); }
.cn-pack-card-price-suffix {
  font-family: var(--nv-font-body); font-style: normal;
  font-size: 0.82rem; color: var(--nv-cream-mute);
  margin-left: 6px;
}
.cn-pack-card-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cn-pack-card-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--nv-font-body); font-weight: 300;
  font-size: 0.94rem; color: var(--nv-cream-mute);
}
.cn-pack-card-features li::before {
  content: "✦"; color: var(--nv-gold); font-size: 0.9em; flex-shrink: 0;
}

/* ═══ LIST CARD / ARTICLE CARD — ecrits.html, listes éditoriales ═════ */
.cn-article-card {
  border-radius: 0;
  padding: 24px 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.22s ease;
  text-decoration: none;
}
.cn-article-card:hover { transform: translateY(-2px); }
.cn-article-card-meta {
  font-family: var(--nv-font-mono); font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--nv-gold);
}
.cn-article-card-title {
  font-family: var(--nv-font-serif-display); font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem); line-height: 1.15;
  color: var(--nv-cream); margin: 0;
}
.cn-article-card-title em { color: var(--nv-gold); font-style: italic; }
.cn-article-card-lead {
  font-family: var(--nv-font-body); font-weight: 300;
  font-size: 0.92rem; line-height: 1.5; color: var(--nv-cream-mute);
  margin: 0;
}

/* ═══ CELEB CARD — fiches célébrités (galerie + résultats) ═══════════ */
.cn-celeb-card {
  border-radius: 0;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none;
  transition: transform 0.22s ease;
}
.cn-celeb-card:hover { transform: translateY(-2px); }
.cn-celeb-card-photo {
  width: 100%; aspect-ratio: 1/1;
  border-radius: 0; overflow: hidden;
  background: rgba(228, 192, 126, 0.06);
}
.cn-celeb-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-celeb-card-name {
  font-family: var(--nv-font-serif-display); font-style: italic;
  font-size: 1.08rem; line-height: 1.15;
  color: var(--nv-cream); margin: 0;
}
.cn-celeb-card-meta {
  font-family: var(--nv-font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nv-gold-soft);
}

/* ═══ SEARCH FIELD — recherche figures, autocomplete ═════════════════ */
.cn-search-field {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-radius: 0;
  max-width: 540px; width: 100%;
  margin: 0 auto;
}
.cn-search-field input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--nv-cream);
  font-family: var(--nv-font-body); font-size: 0.95rem;
}
.cn-search-field input::placeholder {
  color: var(--nv-cream-faint); font-style: italic;
}
.cn-search-field svg { color: var(--nv-gold-soft); flex-shrink: 0; }

/* ═══ WHEEL WRAP — conteneur roue zodiacale ══════════════════════════ */
.cn-wheel-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin: 0 auto; max-width: 920px; width: 100%;
  padding: 40px 24px;
  overflow: visible;
}
@media (min-width: 768px) { .cn-wheel-wrap { padding: 60px 48px; } }
@media (min-width: 1024px) { .cn-wheel-wrap { padding: 80px 100px; } }
.cn-wheel-wrap-kicker {
  font-family: var(--nv-font-mono); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--nv-gold); margin: 0;
}
.cn-wheel-wrap-line {
  font-family: var(--nv-font-body); font-style: italic; font-weight: 300;
  font-size: 0.95rem; color: var(--nv-cream-mute);
  margin: 0; text-align: center;
}

/* ═══ TOGGLE GROUP — sélecteurs type de lien, options ═══════════════ */
.cn-toggle-group {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  padding: 4px;
  border-radius: 0;
  background: rgba(228, 192, 126, 0.04);
}
.cn-toggle-group input[type="radio"],
.cn-toggle-group input[type="checkbox"] { display: none; }
.cn-toggle-group label {
  padding: 8px 18px;
  border-radius: 0;
  font-family: var(--nv-font-body); font-size: 0.86rem; font-weight: 500;
  color: var(--nv-cream-mute);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  border: 1px solid transparent;
}
.cn-toggle-group input:checked + span,
.cn-toggle-group label:has(input:checked) {
  background: rgba(228, 192, 126, 0.18);
  color: var(--nv-gold-strong);
  border-color: var(--lx-goldink-3, rgba(228, 192, 126, 0.3));
}

/* ═══ EYEBROW META — header avec ligne médiane (ecrits.html) ═════════ */
.cn-eyebrow-meta {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--nv-font-mono); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--nv-gold);
  margin-bottom: 18px;
}
.cn-eyebrow-meta-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,
    rgba(228, 192, 126, 0.4) 0%,
    rgba(228, 192, 126, 0.08) 100%);
}

/* ═══ MODAL — fenêtres modales compte.html ══════════════════════════ */
.cn-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--lx-surfa-78, rgba(4, 6, 17, 0.78));
  backdrop-filter: blur(8px);
}
.cn-modal.is-open { display: flex; }
.cn-modal-body {
  background: var(--lx-surfa-96, rgba(4, 6, 17, 0.96));
  border-radius: 0;
  border: 1px solid var(--lx-goldink-2, rgba(228, 192, 126, 0.2));
  padding: 36px 32px;
  max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.cn-modal-title {
  font-family: var(--nv-font-serif-display); font-style: italic;
  font-size: 1.6rem; color: var(--nv-cream);
  margin: 0 0 18px;
}
.cn-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 0; background: rgba(228, 192, 126, 0.08);
  border: none; color: var(--nv-cream);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ═══ AUTH TABS — onglets login/signup (compte.html) ═══════════════ */
.cn-auth-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  border-radius: 0;
  background: rgba(228, 192, 126, 0.04);
  margin-bottom: 28px;
}
.cn-auth-tabs button,
.cn-auth-tabs .cn-auth-tab {
  flex: 1;
  padding: 10px 18px;
  border-radius: 0;
  background: transparent; border: none;
  font-family: var(--nv-font-body); font-size: 0.92rem; font-weight: 500;
  color: var(--nv-cream-mute);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.cn-auth-tabs button.is-active,
.cn-auth-tabs .cn-auth-tab.is-active {
  background: var(--nv-cream);
  color: var(--nv-navy-deep);
}

/* ═══════════════════════════════════════════════════════════════════════
   v90.26.0 — DoD 7 : Gating backdrop-filter mobile pour performance
   Sur mobile (< 768px), on désactive les filtres GPU coûteux et on
   remplace par un fond solide pour préserver la fluidité du scroll.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .cn-liquid-glass,
  .cn-liquid-glass-strong,
  .cn-liquid-glass-card,
  .nv-liquid-glass,
  .nv-liquid-glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--lx-surfa-85, rgba(11, 16, 32, 0.85)) !important;
  }
  /* Réduit le padding aérien des cards pour gagner de l'espace */
  .cn-liquid-glass-card,
  .cn-step-card { padding: 24px 20px !important; }
  /* Touch targets ≥ 48×48px obligatoire mobile */
  .cn-btn-primary,
  .cn-btn-secondary { min-height: 48px; padding: 12px 22px; }
}

/* ═══ v90.26.0 — Overrides fiches célébrités ═══ */
body.has-nav-cinematic .celeb-name {
  font-family: var(--nv-font-serif-display) !important;
  font-style: italic;
  color: var(--nv-cream);
}
body.has-nav-cinematic .celeb-name em {
  color: var(--nv-gold-strong) !important;
  font-style: italic;
}
body.has-nav-cinematic .celeb-tagline {
  font-family: var(--nv-font-serif);
  font-style: italic;
  color: var(--nv-cream-mute);
}
body.has-nav-cinematic .celeb-birth-strip {
  font-family: var(--nv-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--nv-cream-mute);
}
body.has-nav-cinematic .celeb-meta-label {
  font-family: var(--nv-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nv-gold);
}
body.has-nav-cinematic .celeb-photo-wrap {
  border: 2px solid var(--nv-gold-soft);
}

/* ═══ v90.26.7 — Hotfixes audit live ═══════════════════════════════════ */

/* P0-1 OBSOLÈTE depuis v90.30.2 :
   Le fix essayait de contraindre le badge "Recommandé" en ::before,
   mais ce badge entrait en conflit avec le gradient border ::before
   du design cinematic. Le badge est désormais désactivé via
   `content: none` dans style.css. Le fix ci-dessous est neutralisé.
.pack-card.featured::before,
section .pack-card.featured::before {
  width: max-content !important;
  height: auto !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 4px 12px !important;
  font-size: 0.7rem !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
*/

/* P0-2 : palazzo-repond.html pricing dans .container.narrow (680px)
   Fix : élargir spécifiquement la grille pricing. */
.pr-pricing .container.narrow,
.pr-pricing > .container.narrow {
  max-width: 1320px !important;
}

/* P0-3 + P0-4 : compte.html cards imbriquées + profile cream
   Quand un .palazzo-bloc-card / .empty-state / .profil-card est DEDANS
   un .cn-liquid-glass-card, on dépouille son styling pour éviter le
   double cadre. Et on ramène les .profil-card en palette navy/or. */
.cn-liquid-glass-card .palazzo-bloc-card,
.cn-liquid-glass-card .empty-state,
.cn-liquid-glass-card .compte-zone-commandes > * {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
body.has-nav-cinematic .profil-card {
  background: rgba(228, 192, 126, 0.04) !important;
  background-image: none !important;
  border: 1px solid var(--lx-goldink-18, rgba(228, 192, 126, 0.18)) !important;
  color: var(--nv-cream) !important;
}
body.has-nav-cinematic .profil-card * { color: inherit !important; }

/* P0-5 : compte.html tout le contenu en 680px sur 2560px viewport
   Fix : élargir le container du compte. */
body.has-nav-cinematic .compte-container,
body.has-nav-cinematic .container.narrow.compte-container {
  max-width: 1280px !important;
}

/* v94.0.1 — obsolète : le formulaire de synastrie adopte la carte blanche du
   calculateur de référence, comme tous les autres. La double bordure est réglée
   par un filet discret sur les colonnes, pas par la suppression de la carte. */

/* P1-7 : .cn-hero padding-top insuffisant sur trinite + boussole-3-mois
   (header fixed 66px + hero hero 80px = h1 touche la nav)
   Fix : augmenter le padding-top par défaut du hero cinematic. */
.cn-hero {
  padding-top: clamp(120px, 16vh, 180px) !important;
}

/* P1-9 : grimoire.html grille 3 cols avec 5 cards → 6e cellule vide
   Fix : auto-fit avec minmax pour reflow naturel. */
body.has-nav-cinematic .grimoire-pillars-grid,
body.has-nav-cinematic .grim-cards,
body.has-nav-cinematic .grimoire-cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* ═══ v90.26.8 — Fix inputs anti-zoom iOS mobile ═══════════════════════════
   Sur iOS Safari, tout input/select avec font-size < 16px déclenche un zoom
   au focus, mauvaise UX mobile. On force ≥16px sur tous les inputs/selects/
   textareas sous le breakpoint mobile. Compense les 3 inputs identifiés sur
   index.html (progressions-date, select anonyme, email-gate-input). */
@media (max-width: 767.98px) {
  input[type="date"],
  input[type="time"],
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v90.30.0 — Refonte page compte.html (audit forensic + design critique)
   ═══════════════════════════════════════════════════════════════════════ */

/* FIX 1 — Layout cards Mes Profils chevauchées
   Cause : .cn-liquid-glass-card a overflow:hidden qui clip les ombres
   des cards filles + zéro padding interne en desktop.
   On rétablit padding intérieur + overflow visible (le gradient border
   du ::before garde son overflow:hidden propre). */
body.has-nav-cinematic .compte-zone.cn-liquid-glass-card,
body.has-nav-cinematic .compte-card.cn-liquid-glass-card {
  padding: 2rem 1.75rem !important;
  overflow: visible !important;
}
@media (max-width: 767.98px) {
  body.has-nav-cinematic .compte-zone.cn-liquid-glass-card,
  body.has-nav-cinematic .compte-card.cn-liquid-glass-card {
    padding: 1.5rem 1.25rem !important;
  }
}
body.has-nav-cinematic .compte-zone.cn-liquid-glass-card::before,
body.has-nav-cinematic .compte-card.cn-liquid-glass-card::before {
  overflow: hidden;
}
/* Empêche le H2 ou la grille de pousser hors viewport étroit */
body.has-nav-cinematic .compte-zone-head > div,
body.has-nav-cinematic .compte-card-head > div,
body.has-nav-cinematic .compte-zone .profils-list { min-width: 0; }

/* FIX 2 — Hiérarchie typographique H2 sections compte
   Le H1 (.cn-sec-heading) reste imposant. Les H2 des sections doivent
   être posés (~1.5–1.9rem) et non en taille hero/H1. */
body.has-nav-cinematic .compte-zone-head h2,
body.has-nav-cinematic .compte-card-head h2 {
  font-family: 'Fraunces', 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.1 !important;
  margin: 0 0 0.6rem !important;
}

/* FIX 3 — Espacement zone-index / meta-label : plus discret */
body.has-nav-cinematic .compte-zone-head .zone-index,
body.has-nav-cinematic .compte-card-head .meta-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em !important;
  color: var(--nv-gold, var(--r-gold)) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 0.55rem !important;
  opacity: 0.85;
}

/* FIX 4 — Lisibilité des textes secondaires sur navy */
body.has-nav-cinematic .compte-zone-intro,
body.has-nav-cinematic .compte-card-lead,
body.has-nav-cinematic .compte-section .hint,
body.has-nav-cinematic .compte-section .compte-zone-intro {
  color: var(--lx-ink-8, rgba(248, 242, 222, 0.80)) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  max-width: 680px;
}

/* Lead du H1 (sous-titre principal) : centré sur desktop, marge confortable */
body.has-nav-cinematic .compte-section .lead,
body.has-nav-cinematic .compte-header .lead {
  color: var(--lx-ink-85, rgba(248, 242, 222, 0.85)) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  max-width: 620px;
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}

/* FIX 5 — Bouton "Ajouter un profil" : empêche de coller au bord arrondi */
body.has-nav-cinematic .compte-zone-head .compte-add-btn {
  flex-shrink: 0;
  margin-left: auto;
}

/* FIX 6 — Cards profil : ombres préservées + hover plus subtil */
body.has-nav-cinematic .profil-card {
  box-shadow: 0 8px 28px rgba(11, 16, 32, 0.42),
              inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}
body.has-nav-cinematic .profil-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(11, 16, 32, 0.55),
              inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

/* FIX 7 — Détail RGPD : H2 RGPD trop énorme à cause de l'acronyme tout caps.
   Force la même taille que les autres H2 sections. */
body.has-nav-cinematic article.cn-liquid-glass-card header h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v90.30.1 — Re-calibrage palette interne .profil-card pour fond navy
   (régression silencieuse depuis v90.26.7 : le fond crème original a été
   forcé en navy transparent, mais les pills/cells gardent leurs couleurs
   calibrées pour fond crème → invisibles sur navy).
   ═══════════════════════════════════════════════════════════════════════ */

/* Head : moins agressif, pas de gradient noir massif, juste un soft kicker */
body.has-nav-cinematic .profil-card-head {
  background: linear-gradient(180deg,
    rgba(228, 192, 126, 0.08) 0%,
    rgba(228, 192, 126, 0.02) 100%) !important;
  border-bottom: 1px solid var(--lx-goldink-18, rgba(228, 192, 126, 0.18)) !important;
  padding: 0.95rem 1.1rem !important;
  color: var(--nv-cream, var(--lx-ink, #F8F2DE)) !important;
}
body.has-nav-cinematic .profil-card-title strong {
  color: var(--nv-cream, var(--lx-ink, #F8F2DE)) !important;
  font-size: 1.1rem !important;
  font-family: 'Fraunces', 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
body.has-nav-cinematic .profil-card-cta {
  color: var(--nv-gold, var(--r-gold)) !important;
  font-size: 0.78rem !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  letter-spacing: 0.04em !important;
}
body.has-nav-cinematic .profil-card-gerer {
  background: var(--nv-gold, var(--r-gold)) !important;
  color: #0A0E26 !important;
  font-size: 0.82rem !important;
  padding: 0.4rem 0.95rem !important;
}
body.has-nav-cinematic .profil-card-gerer:hover {
  background: var(--nv-gold-strong, #F2D9A8) !important;
}

/* Body : padding interne respiré */
body.has-nav-cinematic .profil-card-body {
  padding: 1.1rem 1.1rem 1.25rem !important;
  gap: 0.7rem !important;
}

/* Pills lieu/date : fond gold subtil + texte cream lisible */
body.has-nav-cinematic .profil-pill {
  background: rgba(228, 192, 126, 0.10) !important;
  border: 1px solid var(--lx-goldink-18, rgba(228, 192, 126, 0.18)) !important;
  color: var(--nv-cream, var(--lx-ink, #F8F2DE)) !important;
  font-size: 0.88rem !important;
  padding: 0.4rem 0.9rem 0.4rem 0.45rem !important;
}
body.has-nav-cinematic .profil-pill-icon {
  background: rgba(228, 192, 126, 0.22) !important;
  color: var(--nv-cream, var(--lx-ink, #F8F2DE)) !important;
  width: 26px !important; height: 26px !important;
  font-size: 0.85rem !important;
}
body.has-nav-cinematic .profil-pill > span:last-child {
  color: var(--nv-cream, var(--lx-ink, #F8F2DE)) !important;
  opacity: 0.92;
}

/* Grille des 4 signes : glyphs visibles + values en pills or marquées */
body.has-nav-cinematic .profil-grid {
  gap: 0.7rem 0.85rem !important;
  margin-top: 0.35rem !important;
}
body.has-nav-cinematic .profil-cell {
  gap: 0.35rem !important;
}
body.has-nav-cinematic .profil-cell-glyph {
  background: rgba(228, 192, 126, 0.10) !important;
  border: 1px solid var(--lx-goldink-22, rgba(228, 192, 126, 0.22)) !important;
  color: var(--nv-cream, var(--lx-ink, #F8F2DE)) !important;
  width: 38px !important; height: 38px !important;
  font-size: 1.15rem !important;
}
body.has-nav-cinematic .profil-cell-glyph.profil-cell-text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 0.72rem !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--nv-gold, var(--r-gold)) !important;
}
body.has-nav-cinematic .profil-cell-value {
  background: rgba(228, 192, 126, 0.15) !important;
  border: 1px solid var(--lx-goldink-22, rgba(228, 192, 126, 0.22)) !important;
  color: var(--nv-cream, var(--lx-ink, #F8F2DE)) !important;
  font-size: 0.85rem !important;
  padding: 0.32rem 0.7rem !important;
}

/* Pill "Thème solaire" : aligne sur palette gold */
body.has-nav-cinematic .profil-card-solar-pill {
  background: rgba(228, 192, 126, 0.12) !important;
  border-color: var(--lx-goldink-4, rgba(228, 192, 126, 0.4)) !important;
  color: var(--nv-gold-strong, #F2D9A8) !important;
}

/* Card hover : meilleur ressenti */
body.has-nav-cinematic .profil-card:hover {
  background: rgba(228, 192, 126, 0.08) !important;
  border-color: var(--lx-goldink-32, rgba(228, 192, 126, 0.32)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v90.31.0 — Classes utilitaires typographiques unifiées
   ═══════════════════════════════════════════════════════════════════════ */

/* H2 sections (taille hero) — alias direct de .cn-sec-heading */
.cn-sec-h2 {
  font-family: var(--nv-font-serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-sec-h2-size, clamp(2.2rem, 6vw, 4.4rem));
  line-height: var(--t-sec-h2-lh, 1.0);
  letter-spacing: var(--t-sec-h2-ls, -0.025em);
  color: var(--nv-cream);
  margin: 0 auto 24px;
  text-align: center;
  max-width: var(--max-h2-width, 24ch);
}
.cn-sec-h2 em { color: var(--nv-gold); font-style: italic; }

/* H2 sous-section (card head, plus posé) */
.cn-sec-heading--sub,
.cn-sec-h2--sub {
  font-size: var(--t-sub-h2-size, clamp(1.5rem, 2.4vw, 1.9rem)) !important;
  line-height: var(--t-sub-h2-lh, 1.15) !important;
  margin: 0 0 12px !important;
  text-align: left;
  max-width: none;
}

/* Lead unifié */
.cn-lead {
  font-family: var(--nv-font-body);
  font-size: var(--t-lead-size, clamp(1.05rem, 1.5vw, 1.25rem));
  line-height: var(--t-lead-lh, 1.55);
  color: var(--lx-ink-82, rgba(248, 242, 222, 0.82));
  max-width: var(--max-lead-width, 640px);
  margin: 0 auto;
  text-align: center;
}

/* Force unifiée du fallback global pour TOUS les <h2> nus dans une section
   cinematic. Si la page ajoute la classe explicitement, son CSS l'emporte. */
body.has-nav-cinematic main section > h2:not([class]):not(.cn-sec-heading--sub),
body.has-nav-cinematic main section header > h2:not([class]):not(.cn-sec-heading--sub),
body.has-nav-cinematic main > h2:not([class]) {
  font-family: var(--nv-font-serif-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--t-sec-h2-size, clamp(2.2rem, 6vw, 4.4rem)) !important;
  line-height: var(--t-sec-h2-lh, 1.0) !important;
  letter-spacing: var(--t-sec-h2-ls, -0.025em) !important;
  color: var(--nv-cream) !important;
  text-align: center !important;
  max-width: var(--max-h2-width, 24ch) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Lead fallback : tout p.lead nu hérite du nouveau standard */
body.has-nav-cinematic p.lead:not(.cn-lead--custom) {
  font-size: var(--t-lead-size, clamp(1.05rem, 1.5vw, 1.25rem)) !important;
  line-height: var(--t-lead-lh, 1.55) !important;
  max-width: var(--max-lead-width, 640px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Patches chirurgicaux v90.31.0 — packs.html ─────────────────────────────
   Les H2 de packs.html sont imbriqués dans <div class="section-head-left">
   et <div class="article-body">, donc échappent au fallback global précédent.
   Ces deux règles ne touchent que packs.html (autres pages avec ces sélecteurs
   n'ont pas has-nav-cinematic, sauf ecrits.html qui n'a pas de H2 dans .article-body). */

/* H2 de section principale dans .section-head-left → taille hero italique */
body.has-nav-cinematic .section-head-left h2 {
  font-family: var(--nv-font-serif-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--t-hero-h1-size, clamp(2.6rem, 8vw, 5.5rem)) !important;
  line-height: var(--t-hero-h1-lh, 0.95) !important;
  letter-spacing: var(--t-hero-h1-ls, -0.03em) !important;
  color: var(--nv-cream) !important;
  margin: 0 0 16px !important;
  text-align: left;
}
body.has-nav-cinematic .section-head-left h2 em {
  color: var(--nv-gold) !important;
  font-style: italic !important;
}

/* H2 dans .article-body (steps 01/02/03 sur packs) → taille sous-section posée */
body.has-nav-cinematic .article-body h2 {
  font-family: var(--nv-font-serif-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--t-sub-h2-size, clamp(1.5rem, 2.4vw, 1.9rem)) !important;
  line-height: var(--t-sub-h2-lh, 1.15) !important;
  color: var(--nv-cream) !important;
  margin: 2.5rem 0 0.85rem !important;
}
body.has-nav-cinematic .article-body h2 em {
  color: var(--nv-gold) !important;
  font-style: italic !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v90.31.0 — FIX OPERA : empilage vertical head/body dans .profil-card
   ═══════════════════════════════════════════════════════════════════════
   Cause racine : `.profil-card` est un <li> sans `display` explicite →
   reste `display: list-item`. Combiné à un parent grid-container
   (.profils-list) et au pseudo `::before` absolute du `.cn-liquid-glass-card`
   parent, certains Chromium dérivés (Opera notamment) génèrent un
   anonymous marker box qui repousse `.profil-card-body` à droite de
   `.profil-card-head` au lieu d'en-dessous.
   Fix : forcer explicitement display: flex; flex-direction: column sur
   le <li>, plus list-style: none pour neutraliser tout marker fantôme,
   et width: 100% sur les deux enfants directs. Inoffensif sur les autres
   navigateurs (qui le rendaient déjà correctement en vertical). */
.profils-list > .profil-card {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
}
.profil-card > .profil-card-head,
.profil-card > .profil-card-body {
  width: 100% !important;
  flex: 0 0 auto !important;
}