/*
Theme Name: Rosmaryn Human Design
Theme URI: https://rosmaryn.app
Description: Thème Human Design par Rosmaryn - Générateur de Body Graph
Author: Rosmaryn
Version: 2.2
Text Domain: rosmaryn-hd
*/

/* ── Reset & Base ── */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Protection copie : DÉSACTIVÉE temporairement (réactiver à la mise en prod) ──
   Bloc à décommenter pour bloquer la sélection/copie de texte sur le site.
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select, [contenteditable="true"], [contenteditable=""],
code, pre, kbd, samp, .allow-select, .wp-admin {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
*/

/* ── Force pointer cursor on ALL interactive elements ── */
a, button, select, input[type="submit"], input[type="button"],
label, [role="button"], [tabindex], [onclick],
[data-action], [data-tab], [data-view], [data-layer],
[data-gate], [data-idx] { cursor: pointer !important; }

/* ── Default link color (gold) ──
 * Applies globally with low specificity (:where) so ANY component with
 * an explicit color rule keeps its own style. Fixes browser-default blue
 * on raw <a> inside prose / the_content() / hardcoded text blocks. */
:where(a:not([class])),
:where(a[href]:not([class])) {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s;
}
:where(a:not([class]):hover),
:where(a[href]:not([class]):hover) {
  color: var(--gold-light);
  text-decoration: underline;
}
body.light-mode :where(a:not([class])),
body.light-mode :where(a[href]:not([class])) { color: #8b6914; }
body.light-mode :where(a:not([class]):hover),
body.light-mode :where(a[href]:not([class]):hover) { color: #6b5010; }

/* Liens à l'intérieur de blocs de contenu éditorial et gate CTAs.
 * On cible les conteneurs où `the_content()` ou du texte brut peut injecter
 * des <a> inline - ces liens prennent la couleur or avec soulignement au hover. */
.premium-gate-cta__text a,
.premium-gate-cta__sub a,
.legal-content p a,
.legal-content li a,
.guide-content p a,
.guide-content li a,
.faq-item__a p a,
.faq-item__a li a,
.mc-sub__upgrade-hint a,
.mc-welcome-toast .hd-welcome-toast__link,
.mc-premium-banner p a,
.hero-perks__text span a,
.references-entry__desc a,
.references-footnote a,
.cpw-text a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dashed rgba(201, 168, 76, 0.35);
  transition: color 0.2s, border-color 0.2s;
}
.premium-gate-cta__text a:hover,
.premium-gate-cta__sub a:hover,
.legal-content p a:hover,
.legal-content li a:hover,
.guide-content p a:hover,
.guide-content li a:hover,
.faq-item__a p a:hover,
.faq-item__a li a:hover,
.mc-sub__upgrade-hint a:hover,
.mc-premium-banner p a:hover,
.hero-perks__text span a:hover,
.references-entry__desc a:hover,
.references-footnote a:hover,
.cpw-text a:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}
body.light-mode .premium-gate-cta__text a,
body.light-mode .premium-gate-cta__sub a,
body.light-mode .legal-content p a,
body.light-mode .legal-content li a,
body.light-mode .guide-content p a,
body.light-mode .guide-content li a,
body.light-mode .faq-item__a p a,
body.light-mode .faq-item__a li a,
body.light-mode .mc-sub__upgrade-hint a,
body.light-mode .mc-premium-banner p a,
body.light-mode .hero-perks__text span a,
body.light-mode .references-entry__desc a,
body.light-mode .references-footnote a,
body.light-mode .cpw-text a {
  color: #8b6914;
  border-bottom-color: rgba(139, 105, 20, 0.35);
}
body.light-mode .premium-gate-cta__text a:hover,
body.light-mode .premium-gate-cta__sub a:hover,
body.light-mode .legal-content p a:hover,
body.light-mode .legal-content li a:hover,
body.light-mode .guide-content p a:hover,
body.light-mode .guide-content li a:hover,
body.light-mode .faq-item__a p a:hover,
body.light-mode .faq-item__a li a:hover,
body.light-mode .hero-perks__text span a:hover,
body.light-mode .references-entry__desc a:hover,
body.light-mode .references-footnote a:hover,
body.light-mode .cpw-text a:hover {
  color: #6b5010;
  border-bottom-color: #8b6914;
}

:root {
  /* ── Couleurs de base ── */
  --bg-primary: #050c1c;
  --bg-secondary: #0b1428;
  --bg-card: #101e3c;
  --bg-input: #0d1830;
  --gold: #c9a84c;
  --gold-light: #e8d48b;
  --gold-dark: #a07c2a;
  --gold-rgb: 201, 168, 76;
  --accent: #7b68ee;
  --text-primary: #f0eeeb;
  --text-secondary: #d0cdd5;
  --text-muted: #8a8694;
  --red-hd: #e74c5e;
  --red-hd-light: #ff6b7a;
  --border: rgba(201, 168, 76, 0.15);
  --glow: 0 0 30px rgba(201, 168, 76, 0.15);

  /* ── Typographie ── */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Lora', serif;
  --fs-xs: 0.72rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.1rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.5rem, 3vw, 2.2rem);
  --fs-3xl: clamp(2rem, 4vw, 3rem);
  --lh-tight: 1.25;
  --lh-base: 1.6;
  --lh-loose: 1.8;

  /* ── Espacement (modulable x 0.25rem) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* ── Border-radius (4 niveaux + full) ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ── Ombres ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.18);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.25);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.35);
  --shadow-gold: 0 4px 20px rgba(var(--gold-rgb), 0.22);

  /* ── Z-index (échelle centralisée, hiérarchie explicite) ── */
  --z-base: 0;
  --z-decoration: 1;
  --z-sticky: 10;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-overlay: 500;
  --z-floating: 900;
  --z-modal-backdrop: 9000;
  --z-modal: 9500;
  --z-modal-top: 9800;
  --z-loader: 9900;
  --z-toast: 10000;
  --z-top: 11000;

  /* ── Transitions ── */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Breakpoints (référence commentée, utilisable via @media hardcodé) ── */
  /* --bp-sm: 480px; --bp-md: 768px; --bp-lg: 900px; --bp-xl: 1200px; */

  /* ── Safe-area (iOS notch) ── */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* ── Light mode ── */
body.light-mode {
  --bg-primary: #f5f3ef;
  --bg-secondary: #ece8e1;
  --bg-card: #ffffff;
  --bg-input: #f8f6f2;
  --gold: #8b6914;
  --gold-light: var(--gold-dark);
  --gold-dark: #6b5010;
  --gold-rgb: 139, 105, 20;
  --accent: #5b4ad0;
  --text-primary: #101e3c;
  --text-secondary: #3a3850;
  --text-muted: #7a7690;
  --red-hd: #c0354a;
  --red-hd-light: #d04060;
  --border: rgba(0, 0, 0, 0.1);
  --glow: 0 0 20px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
}

/* ── A11y : focus-visible global (WCAG 2.4.7) ──
   Restaure un anneau de focus clavier visible même quand `outline:none`
   est posé pour désactiver le halo au clic souris. Spécifique `body` +
   `:focus-visible` pour battre les règles existantes sans !important
   quand c'est possible, et avec !important quand des styles existants
   utilisent `outline:none !important`. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm);
}

/* ── Reduced motion : désactive animations/transitions ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Critical : empêche le flash des panneaux lazy-loaded (transit.css chargé
   après window.load) avant l'arrivée de leur feuille de style. */
.transit-panel { display: none; }
.transit-panel.active { display: block; }

body.light-mode::before { background: none; }
body.light-mode .site-title { color: #101e3c; }
body.light-mode .site-title::after { background: linear-gradient(to right, #8b6914, transparent); }
body.light-mode .site-subtitle { color: #7a7690; }
body.light-mode .nav-menu > li > a { color: #3a3850; }
body.light-mode .nav-menu > li > a:hover,
body.light-mode .nav-menu .current-menu-item > a { color: #8b6914; background: rgba(139,105,20,0.08); }
body.light-mode .nav-menu .sub-menu { background: #fff; border-color: rgba(0,0,0,0.1); }
body.light-mode .nav-menu .sub-menu a { color: #101e3c; }
body.light-mode .header-account { border-color: rgba(0,0,0,0.15); color: #7a7690; }
body.light-mode .header-account:hover { border-color: #8b6914; color: #8b6914; }
body.light-mode .nav-toggle span { background: #101e3c; }
body.light-mode .header-theme-toggle { border-color: rgba(0,0,0,0.15); }
body.light-mode .birth-bar {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,246,242,0.97));
  border-bottom: 1px solid rgba(139,105,20,0.15);
  box-shadow: 0 2px 16px rgba(139,105,20,0.08);
}
body.light-mode .birth-bar__name { color: #101e3c; background: rgba(139,105,20,0.06); border-color: rgba(139,105,20,0.18); }
body.light-mode .birth-bar__date { color: #3a3850; }
body.light-mode .birth-bar__city { color: #7a7690; }
body.light-mode .birth-bar__sep { color: rgba(139,105,20,0.3); }
body.light-mode .summary-banner { background: #fff; border-color: rgba(0,0,0,0.08); }
body.light-mode .summary-label { color: #3a3850; }
body.light-mode .summary-value { color: #8b6914; }
body.light-mode .share-btn { background: #fff; border-color: rgba(0,0,0,0.1); color: #7a7690; }
body.light-mode .share-btn:hover { border-color: #8b6914; color: #8b6914; }
body.light-mode .tab-btn { color: #3a3850; }
body.light-mode .tab-btn:hover { color: #8b6914; background: rgba(139,105,20,0.05); }
body.light-mode .tab-btn.active {
  color: #8b6914;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(139,105,20,0.16) 0%, rgba(139,105,20,0.06) 60%, rgba(139,105,20,0.01) 100%);
  border: 1px solid rgba(139,105,20,0.32);
  border-bottom: 2px solid #8b6914;
  box-shadow: 0 -2px 12px rgba(139,105,20,0.16) inset, 0 -1px 0 rgba(139,105,20,0.4) inset;
  text-shadow: none;
}
body.light-mode .tab-btn.active::before {
  background: linear-gradient(90deg, transparent, #8b6914, transparent);
}
body.light-mode .explain-block h4 { color: #101e3c; }
body.light-mode .accordion-header { background: #f8f6f2; }
body.light-mode .accordion-header:hover { background: #f0ede6; }
body.light-mode .site-footer { border-top-color: rgba(0,0,0,0.08); color: #7a7690; }
body.light-mode .site-footer a { color: #8b6914; }
body.light-mode .form-group input, body.light-mode .form-group select {
  background: #fff; border-color: rgba(0,0,0,0.12); color: #101e3c;
}
body.light-mode .btn-generate { background: linear-gradient(135deg, #6b5010, #8b6914); color: #fff; }
body.light-mode .cpw-btn { color: #fff; }
body.light-mode .hd-tip__popup { background: #101e3c; color: #f0eeeb; border-color: #333; }
body.light-mode .channel-tag, body.light-mode .dormant-tag {
  background: #f8f6f2; border-color: rgba(0,0,0,0.06);
}
body.light-mode .birth-bar__btn, body.light-mode .birth-bar__reset {
  border-color: rgba(139,105,20,0.3); color: #8b6914; background: rgba(139,105,20,0.04);
}
body.light-mode .birth-bar__btn:hover, body.light-mode .birth-bar__reset:hover {
  background: #8b6914; color: #fff; border-color: #8b6914;
}
body.light-mode .birth-bar__btn:hover, body.light-mode .birth-bar__reset:hover {
  background: #8b6914; color: #fff;
}

/* Uplift typographique global : +0.1rem équivalent sur tous les éléments
   en rem/em via bump de la root. 1rem passe de 16px à 17.6px (≈+10%).
   Mobile-first : les breakpoints existants (900/768) ne redéfinissent pas
   html.font-size, donc l'échelle est héritée partout en responsive. */
html { font-size: 110%; scroll-behavior: smooth; }

/* Sur très petits écrans, on retombe à ~105% pour garder la densité
   des cards/grilles existantes - reste au-dessus de la taille d'origine. */
@media (max-width: 480px) {
  html { font-size: 106.25%; } /* 17px */
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh; /* fallback */
  min-height: 100dvh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 20%, rgba(123,104,238,0.04) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(201,168,76,0.03) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

/* ── Header ── */
.site-header {
  position: relative; z-index: var(--z-modal); text-align: center;
  /* Safe-area iOS (encoche/Dynamic Island) + marge latérale pour PWA */
  padding: max(calc(1.5rem + 15px), calc(var(--sat) + 15px)) var(--sar) 1.5rem var(--sal);
}

/* Filet continu sous le header */
.hd-header-divider {
  max-width: 1100px;
  margin: -10px auto 0;
  padding: 0 2rem;
  height: 1px;
  pointer-events: none;
}
.hd-header-divider::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(var(--gold-rgb), .55) 50%,
    transparent 100%
  );
}
.site-header__inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; position: relative; }
.site-title { font-family: var(--font-heading); font-size: clamp(1.6rem,4vw,2.8rem); font-weight: 300; letter-spacing: 0.15em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.15rem; }
.site-subtitle { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-secondary); font-weight: 300; }
/* Gold gradient line - reusable on titles */
.gold-line::after,
.site-title::after,
.summary-banner::after,
.legend-title::after,
.tabs-nav::after,
.chart-recap__title::after,
.explain-block h4:first-child::after,
.accordion-header .acc-title::after,
.faq-title::after,
.faq-section__title::after,
.contact-title::after {
  content: ''; display: block; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
}
.site-title::after { width: 100%; max-width: 200px; margin: 0.5rem auto 0; }
.summary-banner::after { display: none; }
.legend-title::after { display: none; }
.tabs-nav::after { display: none; }
.chart-recap__title::after { width: 100%; margin-top: 0.5rem; }
.explain-block h4:first-child::after { width: 100%; margin-top: 0.35rem; }
.accordion-header .acc-title::after { display: none; }
.cta-banner__title::after { width: 100%; margin-top: 0.4rem; background: linear-gradient(to right, var(--bg-primary), transparent); }
.site-title-link { text-decoration: none; color: inherit; display: inline-block; cursor: pointer; }
/* Account icon next to logo (desktop) / next to burger (mobile) */
.header-account {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--text-muted);
  text-decoration: none; transition: all 0.2s;
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
}
.header-account:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.08); }
.header-account.is-connected { border-color: rgba(201,168,76,0.5); color: var(--gold); background: rgba(201,168,76,0.06); }
.header-account.is-connected:hover { background: rgba(201,168,76,0.14); }
body.light-mode .header-account.is-connected { border-color: rgba(139,105,20,0.35); color: #8b6914; background: rgba(139,105,20,0.05); }
.header-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: none; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s; font-size: 1rem;
  position: absolute; right: 5rem; top: 50%; transform: translateY(-50%);
}
.header-theme-toggle:hover { border-color: var(--gold); }

.header-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: none; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s;
  position: absolute; right: 8rem; top: 50%; transform: translateY(-50%);
}
.header-search-toggle:hover { border-color: var(--gold); color: var(--gold); }
body.light-mode .header-search-toggle { border-color: rgba(0,0,0,0.15); color: #7a7690; }
body.light-mode .header-search-toggle:hover { border-color: #8b6914; color: #8b6914; }

/* ── Overlay de recherche global ── */
.hd-search-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.hd-search-overlay[hidden] { display: none; }
.hd-search-overlay__backdrop { position: absolute; inset: 0; background: rgba(5,12,28,0.85); backdrop-filter: blur(6px); cursor: pointer; animation: hdSearchFade 0.25s ease; }
body.light-mode .hd-search-overlay__backdrop { background: rgba(230,225,215,0.85); }
@keyframes hdSearchFade { from { opacity: 0 } to { opacity: 1 } }
.hd-search-overlay__panel {
  position: relative; z-index: 1;
  width: min(720px, calc(100vw - 2rem));
  background: linear-gradient(180deg, rgba(16,30,60,0.98), rgba(13,24,48,0.98));
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 18px;
  padding: 2.25rem 2rem 1.75rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.1);
  animation: hdSearchSlide 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
body.light-mode .hd-search-overlay__panel { background: linear-gradient(180deg, #ffffff, #faf9f5); border-color: rgba(139,105,20,0.3); }
@keyframes hdSearchSlide { from { opacity: 0; transform: translateY(-20px) } to { opacity: 1; transform: translateY(0) } }
.hd-search-overlay__close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.hd-search-overlay__close:hover { color: var(--gold); border-color: var(--gold); }
body.light-mode .hd-search-overlay__close { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #7a7690; }
body.light-mode .hd-search-overlay__close:hover { color: #8b6914; border-color: #8b6914; }
.hd-search-overlay__label { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--gold); margin-bottom: 1rem; letter-spacing: 0.02em; }
body.light-mode .hd-search-overlay__label { color: #8b6914; }
.hd-search-overlay__inputwrap {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.3); border-radius: 12px;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem; transition: all 0.2s;
}
.hd-search-overlay__inputwrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.12); }
body.light-mode .hd-search-overlay__inputwrap { background: #fff; border-color: rgba(139,105,20,0.3); }
.hd-search-overlay__icon { color: var(--text-muted); flex-shrink: 0; }
.hd-search-overlay__inputwrap input[type="search"] {
  flex: 1; background: none; border: 0; outline: 0;
  font-family: 'Lora', serif; font-size: 1.05rem; color: var(--text-primary, #e8e8e8);
  padding: 0.5rem 0.2rem;
}
.hd-search-overlay__inputwrap input[type="search"]::placeholder { color: var(--text-muted); opacity: 0.65; }
body.light-mode .hd-search-overlay__inputwrap input[type="search"] { color: #1a1a1a; }
.hd-search-overlay__submit {
  background: var(--gold); color: #050c1c; border: 0; border-radius: 9px;
  padding: 0.6rem 1.2rem; font-family: 'Lora', serif; font-weight: 600; font-size: 0.9rem;
  cursor: pointer; transition: all 0.2s;
}
.hd-search-overlay__submit:hover { background: #d4b355; transform: translateX(1px); }
.hd-search-overlay__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 1.25rem; }
.hd-search-overlay__chips-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-right: 0.3rem; }
.hd-search-overlay__chips a {
  display: inline-block; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill);
  font-family: 'Lora', serif; font-size: 0.82rem; color: var(--text-secondary, #a8a8a8);
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02);
  text-decoration: none; transition: all 0.2s;
}
.hd-search-overlay__chips a:hover { color: var(--gold); border-color: var(--gold); background: rgba(201,168,76,0.08); }
body.light-mode .hd-search-overlay__chips a { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); color: #555; }
body.light-mode .hd-search-overlay__chips a:hover { color: #8b6914; border-color: #8b6914; background: rgba(139,105,20,0.08); }
.hd-search-overlay__hint { margin: 1rem 0 0; font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
.hd-search-overlay__hint strong { color: var(--gold); font-style: normal; font-weight: 600; }
body.hd-search-open { overflow: hidden; }

@media (max-width: 900px) {
  .hd-search-overlay { padding-top: 5vh; }
  .hd-search-overlay__panel { padding: 2rem 1.25rem 1.25rem; }
  .hd-search-overlay__label { font-size: 1.25rem; }
  .hd-search-overlay__submit { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
  .hd-search-overlay__inputwrap input[type="search"] { font-size: 16px; }
}

/* ── Navigation principale ── */
.main-nav { margin-top: 0.9rem; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: 6px; padding: 0.5rem 0.55rem; cursor: pointer;
  flex-direction: column; gap: 0; align-items: center; justify-content: center;
  width: 38px; height: 38px;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--gold);
  transition: transform 0.3s, opacity 0.2s;
}
.nav-toggle span:nth-child(1) { margin-bottom: 5px; }
.nav-toggle span:nth-child(2) { margin-bottom: 5px; }
/* Burger → X animation */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu { list-style: none; display: flex; justify-content: center; gap: 0.2rem; flex-wrap: wrap; margin: 0; padding: 0; }
.nav-menu li { position: relative; list-style: none; }
/* Bloc actions (recherche + thème) - visible uniquement en mobile */
.nav-mobile-actions { display: none !important; }
.nav-menu > li > a {
  display: block; padding: 0.45rem 0.9rem;
  color: var(--text-secondary); text-decoration: none;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em; border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.nav-menu > li > a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-page-ancestor > a { color: var(--gold); background: rgba(201,168,76,0.08); }
/* Premium nav button */
.nav-premium__link {
  display: inline-flex !important; align-items: center; gap: 0.35rem;
  background: linear-gradient(135deg, rgba(201,168,76,0.12) 0%, rgba(201,168,76,0.04) 100%) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  color: var(--gold) !important; font-weight: 600 !important;
  border-radius: 8px !important;
}
.nav-premium__link:hover {
  background: rgba(201,168,76,0.2) !important;
  border-color: var(--gold) !important;
}
.nav-premium__link svg { flex-shrink: 0; }
body.light-mode .nav-premium__link {
  background: linear-gradient(135deg, rgba(139,105,20,0.08) 0%, rgba(139,105,20,0.02) 100%) !important;
  border-color: rgba(139,105,20,0.25) !important;
  color: #8b6914 !important;
}
body.light-mode .nav-premium__link:hover {
  background: rgba(139,105,20,0.15) !important;
}
/* Pro variant (pourpre) - upgrade Premium → Pro */
.nav-premium__link--pro {
  background: linear-gradient(135deg, rgba(183,148,217,0.14) 0%, rgba(183,148,217,0.04) 100%) !important;
  border-color: rgba(183,148,217,0.35) !important;
  color: #b794d9 !important;
}
.nav-premium__link--pro:hover {
  background: rgba(183,148,217,0.22) !important;
  border-color: #b794d9 !important;
}
body.light-mode .nav-premium__link--pro {
  background: linear-gradient(135deg, rgba(109,70,155,0.08) 0%, rgba(109,70,155,0.02) 100%) !important;
  border-color: rgba(109,70,155,0.28) !important;
  color: #6d469b !important;
}
body.light-mode .nav-premium__link--pro:hover {
  background: rgba(109,70,155,0.15) !important;
}
.nav-menu .sub-menu {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); min-width: 230px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.4rem 0; z-index: 500;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  margin-top: 0;
}
/* Pont invisible entre le lien parent et le sous-menu */
.nav-menu li::after {
  content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 8px;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu { display: block; animation: fadeUp 0.15s ease-out; }
.nav-menu .sub-menu li { list-style: none; }
.nav-menu .sub-menu a {
  display: block; padding: 0.45rem 1.25rem;
  color: var(--text-primary); text-decoration: none;
  font-size: 0.78rem; font-weight: 400; white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav-menu .sub-menu a:hover { color: var(--gold); background: rgba(201,168,76,0.08); }

/* ── Mega Menu ── */
.mega-menu {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem 1.5rem;
  box-shadow: 0 16px 50px rgba(0,0,0,0.4);
  z-index: 500; min-width: 700px;
  grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
/* Variante simple : 2 colonnes compactes (À propos / Offres) */
.mega-menu--simple {
  min-width: 380px;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  padding: 1rem 1.25rem;
}
@media (max-width: 600px) {
  .mega-menu--simple { min-width: 280px; grid-template-columns: 1fr; gap: 0.6rem; }
}
.has-mega:hover > .mega-menu,
.has-mega:focus-within > .mega-menu { display: grid; animation: fadeUp 0.15s ease-out; }
/* Pont invisible */
.has-mega::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 8px; }
.mega-menu__title {
  font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600;
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 0.5rem; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.mega-menu__col ul { list-style: none; padding: 0; margin: 0; }
.mega-menu__col li { list-style: none; }
.mega-menu__col a {
  display: block; padding: 0.3rem 0; font-size: 0.78rem;
  color: var(--text-secondary); text-decoration: none;
  transition: color 0.2s; white-space: nowrap;
}
.mega-menu__col a:hover { color: var(--gold); }
body.light-mode .mega-menu { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
body.light-mode .mega-menu__title { color: #8b6914; }
body.light-mode .mega-menu__col a { color: #3a3850; }
body.light-mode .mega-menu__col a:hover { color: #8b6914; }


@media (max-width: 1024px) {
  /* ── Header layout: logo centré, burger + icônes en position absolue ── */
  .site-header__inner { position: relative; text-align: center; }
  .nav-toggle {
    display: flex; position: absolute; top: 0; left: 0.75rem;
    margin: 0;
  }
  .header-account {
    position: absolute; top: 0; right: 0.75rem;
    width: 38px; height: 38px; transform: none;
  }
  /* Recherche + thème déplacés dans le panneau du menu mobile */
  .header-theme-toggle,
  .header-search-toggle { display: none !important; }
  .main-nav { width: 100%; }

  /* ── Menu mobile : panneau slide-down avec frosted glass ── */
  .nav-menu {
    display: none; flex-direction: column; align-items: stretch;
    flex-wrap: nowrap;
    background: rgba(11, 20, 40, 0.92);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(201, 168, 76, 0.1);
    border-radius: 14px; margin-top: 0.5rem; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease;
    opacity: 0;
    position: relative; z-index: 1050;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  }
  body.light-mode .nav-menu {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  }
  .nav-menu.open {
    display: flex; flex-direction: column; align-items: stretch;
    flex-wrap: nowrap;
    max-height: 80vh; overflow-y: auto; opacity: 1;
    padding: 0.5rem 0;
  }
  @media (orientation: landscape) {
    .nav-menu.open { max-height: calc(100vh - 50px); max-height: calc(100dvh - 50px); }
  }
  .nav-menu > li { width: 100%; }

  /* ── Ligne actions mobile : recherche + thème + connexion/déconnexion ── */
  .nav-mobile-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  }
  body.light-mode .nav-mobile-actions { border-bottom-color: rgba(0, 0, 0, 0.06); }
  .nav-mobile-actions__btn {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-body); font-size: 0.78rem;
    font-weight: 500; letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .nav-mobile-actions__btn svg { color: var(--gold); flex-shrink: 0; }
  .nav-mobile-actions__btn:active,
  .nav-mobile-actions__btn:hover {
    background: rgba(201, 168, 76, 0.14);
    border-color: rgba(201, 168, 76, 0.4);
    color: var(--gold);
  }
  .nav-mobile-actions__btn--auth { text-decoration: none; }
  .nav-mobile-actions__icon {
    font-size: 1rem; line-height: 1; flex-shrink: 0;
  }
  body.light-mode .nav-mobile-actions__btn {
    background: rgba(139, 105, 20, 0.06);
    border-color: rgba(139, 105, 20, 0.2);
    color: #1e1e32;
  }
  body.light-mode .nav-mobile-actions__btn svg { color: #8b6914; }

  /* ── Liens top-level : taille tactile 44px minimum ── */
  .nav-menu > li > a {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0.7rem 1.25rem;
    font-size: 0.88rem; font-weight: 500;
    color: var(--text-primary); text-decoration: none;
    transition: color 0.2s, background 0.2s;
    border-bottom: 1px solid rgba(201, 168, 76, 0.06);
  }
  body.light-mode .nav-menu > li > a {
    border-bottom-color: rgba(0, 0, 0, 0.05);
  }
  .nav-menu > li:last-child > a { border-bottom: none; }
  .nav-menu > li > a:hover,
  .nav-menu > li > a:active {
    color: var(--gold);
    background: rgba(201, 168, 76, 0.06);
  }

  /* ── Séparateur entre nav normale et mega ── */
  .has-mega { border-bottom: none !important; }
  .has-mega > a { border-bottom: none !important; }

  /* ── "Apprendre" : bouton accordéon avec chevron ── */
  .has-mega > a {
    position: relative;
    padding-right: 2.5rem !important;
  }
  .has-mega > a::after {
    content: '';
    position: absolute; right: 1.25rem; top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.3s ease;
    opacity: 0.7;
  }
  .has-mega.mega-open > a::after {
    transform: translateY(-35%) rotate(-135deg);
    opacity: 1;
  }
  .has-mega.mega-open > a {
    color: var(--gold);
    background: rgba(201, 168, 76, 0.06);
  }

  /* ── Mega-menu : caché par défaut, accordéon ── */
  .mega-menu {
    position: static !important; transform: none !important;
    box-shadow: none !important; min-width: 0 !important;
    display: none !important; animation: none !important;
    grid-template-columns: 1fr !important;
    background: rgba(5, 12, 28, 0.5) !important;
    border: none !important;
    border-top: 1px solid rgba(201, 168, 76, 0.08) !important;
    border-bottom: 1px solid rgba(201, 168, 76, 0.08) !important;
    padding: 0.25rem 0 !important;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.25s ease;
  }
  body.light-mode .mega-menu {
    background: rgba(236, 232, 225, 0.6) !important;
    border-top-color: rgba(0, 0, 0, 0.06) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  }
  /* Désactiver le hover desktop */
  .has-mega:hover > .mega-menu,
  .has-mega:focus-within > .mega-menu { display: none !important; }
  /* Ouvrir via JS - pas de scroll interne, on laisse .nav-menu gérer le scroll global */
  .has-mega.mega-open > .mega-menu {
    display: block !important;
    max-height: 2000px;
    overflow: visible;
    padding: 0.5rem 0 !important;
  }

  /* ── Colonnes mega-menu : sous-accordéons ── */
  .mega-menu__col {
    margin: 0;
    border-bottom: 1px solid rgba(201, 168, 76, 0.05);
  }
  body.light-mode .mega-menu__col {
    border-bottom-color: rgba(0, 0, 0, 0.04);
  }
  .mega-menu__col:last-child { border-bottom: none; }

  /* Titre de colonne : tappable, chevron à droite */
  .mega-menu__title {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: 0.6rem 1.25rem;
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gold);
    margin: 0; border-bottom: none;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
    transition: background 0.2s;
    position: relative;
  }
  .mega-menu__title:active {
    background: rgba(201, 168, 76, 0.06);
  }
  /* Chevron sous-section */
  .mega-menu__title::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    opacity: 0.5;
    flex-shrink: 0;
    margin-left: 0.5rem;
  }
  .mega-menu__col.col-open .mega-menu__title::after {
    transform: rotate(-135deg);
    opacity: 0.9;
  }
  .mega-menu__col.col-open .mega-menu__title {
    color: var(--gold); opacity: 1;
  }

  /* Liens de la colonne : cachés par défaut, révélés par .col-open */
  .mega-menu__col ul { display: none; padding: 0 0 0.4rem; }
  .mega-menu__col.col-open ul {
    display: block;
    animation: fadeUp 0.2s ease-out;
  }
  .mega-menu__col a {
    display: flex; align-items: center;
    min-height: 42px; padding: 0.4rem 1.25rem 0.4rem 2rem;
    font-size: 0.82rem; color: var(--text-secondary);
    text-decoration: none; white-space: normal;
    transition: color 0.2s, background 0.2s, padding-left 0.2s;
    text-align: left;
  }
  .mega-menu__col a:hover,
  .mega-menu__col a:active {
    color: var(--gold);
    background: rgba(201, 168, 76, 0.04);
    padding-left: 2.25rem;
  }

  /* ── Sous-menus classiques (non-mega) ── */
  .nav-menu .sub-menu {
    position: static !important; transform: none !important;
    box-shadow: none !important; border: none !important;
    padding: 0 0 0 1rem !important; background: transparent !important;
    display: block !important; animation: none !important;
    min-width: 0 !important;
  }
  .nav-menu .sub-menu a {
    white-space: normal; font-size: 0.82rem;
    padding: 0.45rem 0.9rem; min-height: 42px;
    display: flex; align-items: center;
  }

  /* ── CTA Premium/Pro : carte mise en avant en bas ── */
  .nav-premium {
    margin-top: 0.25rem;
    padding: 0.35rem 0.75rem 0.5rem;
  }
  .nav-premium__link {
    width: 100%; justify-content: center;
    min-height: 48px; font-size: 0.88rem !important;
    border-radius: 10px !important;
    padding: 0.7rem 1rem !important;
    background: linear-gradient(135deg, rgba(201,168,76,0.15) 0%, rgba(201,168,76,0.05) 100%) !important;
    border: 1px solid rgba(201,168,76,0.35) !important;
    transition: all 0.3s;
  }
  .nav-premium__link:active {
    transform: scale(0.98);
    background: rgba(201,168,76,0.2) !important;
  }
  body.light-mode .nav-premium__link {
    background: linear-gradient(135deg, rgba(139,105,20,0.1) 0%, rgba(139,105,20,0.03) 100%) !important;
    border-color: rgba(139,105,20,0.3) !important;
  }

  /* ── Scrollbar discrète dans le menu ── */
  .nav-menu::-webkit-scrollbar { width: 3px; }
  .nav-menu::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, 0.2); border-radius: 3px;
  }
  .nav-menu::-webkit-scrollbar-track { background: transparent; }
  .has-mega.mega-open > .mega-menu::-webkit-scrollbar { width: 3px; }
  .has-mega.mega-open > .mega-menu::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, 0.15); border-radius: 3px;
  }
}

/* ── Hero ── */
.hero { padding: 10px 2rem 2rem; text-align: center; max-width: 700px; margin: 0 auto; }
.hero--edit { padding: 2rem 2rem 0; }
.hero__title-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; flex-wrap: nowrap; margin-bottom: 1rem;
}
.hero__title-row h1 {
  margin: 0;
  font-size: clamp(1.05rem, 4.2vw, 2rem);
  font-weight: 400; line-height: 1.15;
  white-space: nowrap;
}
.hero__hd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold); cursor: pointer;
  transition: all 0.25s; flex-shrink: 0;
}
.hero__hd-btn svg { display: block; }
.hero__hd-btn:hover { background: rgba(201,168,76,0.2); border-color: var(--gold); transform: translateY(-1px); }
.hero h2 { font-family: var(--font-heading); font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 300; color: var(--text-primary); margin-bottom: 1rem; }
.hero p { color: var(--text-secondary); font-size: 1rem; line-height: 1.8; max-width: 550px; margin: 0 auto; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 0.75rem !important; font-size: 0.85rem !important; color: var(--text-secondary); line-height: 1.4 !important; }
.hero__badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.4); color: var(--gold); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.hero__sep { opacity: 0.4; }
body.light-mode .hero__badge { background: rgba(139,105,20,0.1); border-color: rgba(139,105,20,0.35); color: #8b6914; }

/* ── HD Intro Modal ── */
.hd-intro-modal {
  display: none; position: fixed; inset: 0; z-index: var(--z-modal);
  align-items: center; justify-content: center;
}
.hd-intro-modal.open { display: flex; }
.hd-intro-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
}
.hd-intro-modal__content {
  position: relative; z-index: 1;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; max-width: 620px; width: 92%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.hd-intro-modal__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; z-index: 2;
}
.hd-intro-modal__close:hover { border-color: var(--gold); color: var(--gold); }
.hd-intro-modal__body { padding: 2.5rem 2rem; }
.hd-intro-modal__body h2 {
  font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400;
  color: var(--gold); margin: 0 0 1rem; letter-spacing: 0.04em;
}
.hd-intro__lead {
  font-size: 1rem; line-height: 1.8; color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.hd-intro__section { margin-bottom: 1.5rem; }
.hd-intro__section h3 {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600;
  color: var(--text-primary); margin: 0 0 0.5rem; letter-spacing: 0.02em;
}
.hd-intro__section p {
  font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); margin: 0 0 0.5rem;
}
.hd-intro__section ul {
  list-style: none; padding: 0; margin: 0.5rem 0;
}
.hd-intro__section li {
  position: relative; padding-left: 1.2rem; margin-bottom: 0.4rem;
  font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary);
}
.hd-intro__section li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0.6;
}
.hd-intro__cta {
  display: block; width: 100%; margin-top: 1.5rem; padding: 0.85rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border: none; border-radius: 10px; color: var(--bg-primary);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.04em; cursor: pointer; transition: all 0.3s;
}
.hd-intro__cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
@media (max-width: 768px) {
  .hd-intro-modal__body { padding: 2rem 1.25rem; }
  .hd-intro-modal__body h2 { font-size: 1.3rem; }
}

/* ── Form ── */
.form-section { max-width: 600px; margin: 2rem auto; padding: 0 2rem; }
.form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem; box-shadow: var(--glow); }
.form-fieldset { border: 0; padding: 0; margin: 0; min-inline-size: auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.form-row--date { grid-template-columns: 1fr 1.5fr 1fr; }
.form-group { display: flex; flex-direction: column; }
.form-group--full { grid-column: 1 / -1; }
.form-hint { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; font-style: italic; }
.form-group label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.5rem; font-weight: 500; }
.form-label-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.form-label-row label { margin-bottom: 0; }
.form-label-row .btn-random-fill { background: none; border: 1px solid var(--border); border-radius: 5px; padding: 3px 5px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; transition: color 0.2s, border-color 0.2s, transform 0.15s; }
.form-label-row .btn-random-fill:hover { color: var(--gold); border-color: var(--gold); transform: rotate(15deg); }

.form-group input, .form-group select {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.85rem 1rem; color: var(--text-primary); font-family: var(--font-body);
  /* 16px minimum : iOS < 16px déclenche un zoom automatique au focus. */
  font-size: 16px; width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none; appearance: none;
}
.form-group input:focus-visible, .form-group select:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25);
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239a97a0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer;
}
.form-group select option,
.sg-field select option,
.contact-form select option { color: #111; background: #fff; }

/* ─── Global fallback : toutes les <option> de tous les <select> du site
       doivent rester lisibles quelle que soit le thème. Les popups natifs
       de <select> sont OS-rendered et ignorent souvent le CSS parent. ─── */
select option { color: #111; background: #fff; }
select optgroup { color: #111; background: #fff; font-weight: 600; }
.form-group input:focus, .form-group select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); }
.form-group input::placeholder { color: var(--text-muted); }
/* Field error state */
.form-group input.field-error, .form-group select.field-error,
.sg-field input.field-error, .sg-field select.field-error {
  border-color: var(--red-hd) !important;
  box-shadow: 0 0 0 3px rgba(231,76,94,0.15) !important;
  animation: fieldShake 0.4s ease-out;
}
@keyframes fieldShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }

/* ── City autocomplete ── */
.city-autocomplete { position: relative; }
.city-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg-card); border: 1px solid var(--gold);
  border-top: none; border-radius: 0 0 8px 8px;
  max-height: 260px; overflow-y: auto; z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.city-dropdown.open { display: block; }
.city-option {
  padding: 0.65rem 1rem; cursor: pointer;
  font-size: 0.85rem; color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
  display: flex; justify-content: space-between; align-items: center;
}
.city-option:last-child { border-bottom: none; }
.city-option:hover, .city-option.active {
  background: rgba(201,168,76,0.1); color: var(--text-primary);
}
.city-option__name { font-weight: 500; color: var(--text-primary); }
.city-option__detail { font-size: 0.75rem; color: var(--text-muted); }
.city-loading {
  padding: 0.65rem 1rem; font-size: 0.8rem; color: var(--text-muted);
  font-style: italic; text-align: center;
}

.form-save-toggle {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; margin-top: 0.75rem;
}
.form-save-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--text-muted); cursor: pointer;
}
.form-save-label input[type="checkbox"] {
  accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer;
}
.form-save-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--gold-light, #e6c478);
  font-style: italic;
  text-align: right;
}
body.light-mode .form-save-hint { color: #8b6914; }
.btn-generate { display: block; width: 100%; margin-top: 1rem; padding: 1rem 2rem; background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: var(--bg-primary); border: none; border-radius: 8px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); }
.btn-generate:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(201,168,76,0.3); }
.btn-generate:active { transform: translateY(0); }
.btn-generate:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-generate .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(10,10,18,0.3); border-top-color: var(--bg-primary); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto; }
.btn-generate.loading .btn-text { display: none; }
.btn-generate.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── HD Loader ── */
.hd-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4rem 2rem; color: var(--gold); min-height: 500px;
}
/* Loader spécifique au mode édition (/?edit=) - remplace le formulaire vide
   tant que les données BG ne sont pas récupérées. */
.form-edit-loader {
  min-height: 360px;
  padding: 2rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 0 auto;
  max-width: 720px;
}
.hd-loader__mandala { width: 240px; height: 240px; }
.hd-loader__mandala { filter: drop-shadow(0 0 12px rgba(201,168,76,0.2)); }
.hd-loader__ring { animation: mandalaRotate 20s linear infinite; transform-origin: 100px 100px; }
@keyframes mandalaRotate { to { transform: rotate(360deg); } }
.hd-loader__text {
  margin-top: 1.5rem; font-family: var(--font-heading); font-size: 1.05rem;
  color: var(--gold-light); letter-spacing: 0.1em; opacity: 0.7;
  animation: loaderPulse 2.5s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ═════════════════════════════════════════════════════════════════════
 * Gate teaser - 3 cards aperçu + dégradé progressif vers CTA signup.
 * Au lieu d'un gate sec "Contenu réservé", on donne envie.
 * ═══════════════════════════════════════════════════════════════════ */
.gate-wrapper .porte-archive__hero { text-align: center; max-width: 64ch; margin-inline: auto; padding-block: 1.6rem 0.8rem; }
.gate-wrapper .porte-archive__hero h1 {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 0.6rem;
  color: var(--text-primary);
}
.gate-wrapper .porte-archive__intro {
  font-size: 1.02rem; line-height: 1.6; color: var(--text-secondary);
  max-width: 56ch; margin-inline: auto;
}

.gate-teaser {
  position: relative; margin: 2.4rem auto 0; max-width: 960px;
  padding-inline: clamp(0.5rem, 2vw, 1rem);
}
.gate-teaser__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.2rem);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
}
.gate-teaser__card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(201, 168, 76, 0.14);
  border-radius: 12px; padding: 1.1rem 1.2rem;
  min-height: 180px; display: flex; flex-direction: column; gap: 0.5rem;
  transition: transform 0.4s cubic-bezier(.2,.9,.3,1.1), border-color 0.3s;
}
.gate-teaser__card:nth-child(2) { transform: translateY(-4px); }
.gate-teaser__card:nth-child(3) { transform: translateY(-10px); opacity: 0.85; }
.gate-teaser__title {
  margin: 0; font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.2rem; font-weight: 500; color: var(--gold-light, #e8d48b);
  letter-spacing: 0.01em;
}
.gate-teaser__text {
  margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55;
  flex: 1; overflow: hidden;
}
.gate-teaser__fade {
  position: absolute; left: 0; right: 0; bottom: -8px; height: 80px;
  background: linear-gradient(180deg, transparent, var(--bg-primary, #0b1428));
  pointer-events: none;
}

body.light-mode .gate-teaser__card {
  background: rgba(139, 105, 20, 0.03);
  border-color: rgba(139, 105, 20, 0.16);
}
body.light-mode .gate-teaser__title { color: var(--gold-dark, #8b6914); }
body.light-mode .gate-teaser__fade {
  background: linear-gradient(180deg, transparent, var(--bg-primary, #fdfaf2));
}

/* Loader error state : shown when the BG doesn't render within 15 s */
.hd-loader--error { color: var(--text-primary, #e9e4d1); gap: 0.6rem; }
.hd-loader--error .hd-loader__error-icon { color: #c9763b; opacity: 0.8; margin-bottom: 0.4rem; animation: none; }
.hd-loader--error .hd-loader__text {
  color: var(--text-primary, #e9e4d1); margin-top: 0.2rem; font-size: 1.05rem;
  letter-spacing: 0; text-align: center; max-width: 32ch; line-height: 1.5;
  opacity: 1; animation: none;
}
.hd-loader--error .hd-loader__hint {
  color: var(--text-secondary); font-size: 0.88rem; max-width: 34ch; text-align: center;
  margin: 0; line-height: 1.55; opacity: 0.8;
}
.hd-loader__retry {
  margin-top: 1.2rem; padding: 0.7rem 1.6rem;
  background: var(--gold, #b8922f); color: #fff; border: none; border-radius: 999px;
  font-family: var(--font-heading); font-size: 0.95rem; letter-spacing: 0.04em;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.hd-loader__retry:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(184,146,47,0.25); }
.hd-loader__retry:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Results Section ── */
.results-section { max-width: 1200px; margin: 3rem auto; padding: 0 1.5rem; display: none; position: relative; }
.results-mandala {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; pointer-events: none; z-index: 0;
  opacity: 0.6;
  animation: mandalaSpin 40s linear infinite;
}
@keyframes mandalaSpin { to { transform: translateX(-50%) rotate(360deg); } }
.results-section > *:not(.results-mandala) { position: relative; z-index: 1; }
.results-section.visible { display: block; animation: fadeUp 0.6s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ── Summary Banner ── */
.summary-banner {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: stretch;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.25rem 2.5rem 1.25rem 2rem; margin-bottom: 2rem;
  position: relative;
  /* Offset pour le birth-bar sticky lors du scrollIntoView post-generate. */
  scroll-margin-top: 200px;
}
.bodygraph-wrapper { scroll-margin-top: 200px; }
/* "Voir l'analyse" prend sa propre ligne mais reste fit-content, centré */
.summary-banner > .summary-analyse-btn {
  flex: 0 0 auto; width: auto;
  margin-left: auto; margin-right: auto;
  order: 100;
}
.summary-banner::after { content: ''; flex-basis: 100%; order: 99; }
.summary-help {
  position: absolute; top: 0.5rem; right: 0.5rem;
}
.summary-tips-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(201,168,76,0.15); border: 1px solid var(--gold);
  cursor: pointer; transition: all 0.2s;
}
.summary-tips-btn .toggle-tips__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: var(--bg-primary);
  font-size: 0.7rem; font-weight: 700;
}
.summary-tips-btn:hover,
.summary-tips-btn[aria-expanded="true"] { background: rgba(201,168,76,0.3); }

.summary-help__pop {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 240px;
  padding: 0.4rem;
  background: var(--bg-secondary, #0b1428);
  border: 1px solid var(--border, rgba(201,168,76,0.25));
  border-radius: 12px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,168,76,0.08);
  z-index: 50;
  display: flex; flex-direction: column; gap: 2px;
  animation: summaryHelpFade 0.18s ease-out;
}
/* Le `display: flex` ci-dessus écraserait l'attribut HTML `hidden`
   (UA stylesheet `[hidden] { display:none }` n'est pas !important).
   Restaure le bon comportement quand le JS toggle `pop.hidden`. */
.summary-help__pop[hidden] { display: none; }
@keyframes summaryHelpFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.summary-help__item {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: 0.55rem 0.7rem;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--text, #e9e6da);
  text-align: left; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.summary-help__item:hover,
.summary-help__item:focus-visible {
  background: rgba(201,168,76,0.12);
  color: var(--gold, #c9a84c);
  outline: none;
}
.summary-help__item-title {
  font-size: 0.92rem; font-weight: 600;
  font-family: var(--font-heading, inherit);
}
.summary-help__item-desc {
  font-size: 0.75rem; opacity: 0.72; line-height: 1.25;
}

/* Mode jour : popover sur fond clair */
body.theme-light .summary-help__pop {
  background: #ffffff;
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 10px 24px -6px rgba(0,0,0,0.18);
}
body.theme-light .summary-help__item { color: #2a2a2a; }
body.theme-light .summary-help__item:hover,
body.theme-light .summary-help__item:focus-visible {
  background: rgba(201,168,76,0.18);
  color: #7a5d12;
}

/* ── En-tête du summary-banner : naissance (gauche) + bouton Modifier (droite) ─
   Uniquement en mode consultation (pas en /?edit=). Remplace la birth-bar. */
.summary-banner__header {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 3rem 0.75rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.12);
  order: -1;
  text-align: left;
}
.summary-banner__birth {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
  text-align: left;
  min-width: 0;
}
.summary-banner__birth-name {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.summary-banner__birth-name:empty { display: none; }
.summary-banner__birth-name:empty + .summary-banner__birth-sep { display: none; }
.summary-banner__birth-sep { color: var(--text-muted); opacity: 0.5; font-size: 0.9rem; }
.summary-banner__birth-date,
.summary-banner__birth-city {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 400;
}
.summary-banner__birth-city { color: var(--text-muted); }
.summary-banner__header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.summary-banner__edit-btn,
.summary-banner__more-btn {
  background: none;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.summary-banner__edit-btn:hover,
.summary-banner__more-btn:hover {
  background: var(--gold);
  color: var(--bg-primary);
}
.summary-banner__edit-icon { flex-shrink: 0; }
.summary-banner__more-btn {
  padding: 0.4rem 0.5rem;
  display: none; /* affiché uniquement mobile */
}
.summary-banner__more-btn[aria-expanded="true"] {
  background: var(--gold);
  color: var(--bg-primary);
}

/* Panneau déroulé (mobile) : infos secondaires ville + heure */
.summary-banner__more-panel {
  display: none;
  flex: 1 1 100%;
  padding: 0.65rem 0.85rem;
  margin-top: 0.5rem;
  background: rgba(var(--gold-rgb), 0.05);
  border: 1px solid rgba(var(--gold-rgb), 0.15);
  border-radius: 10px;
  flex-direction: column;
  gap: 0.35rem;
  animation: hdMoreFade 0.22s ease;
  order: 2;
}
.summary-banner__more-panel:not([hidden]) { display: flex; }
@keyframes hdMoreFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.summary-banner__more-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.78rem;
}
.summary-banner__more-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.summary-banner__more-value {
  color: var(--text-primary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cacher l'en-tête en mode édition (la birth-bar reprend le relais) */
body.hd-editing .summary-banner__header { display: none; }

/* En mode consultation (pas édition) : la birth-bar est supprimée au profit
   de l'en-tête du summary-banner. On l'écrase avec !important pour battre le
   .birth-bar.visible ajouté par le JS. */
body:not(.hd-editing) .birth-bar { display: none !important; }

/* Mobile : même ligne (pattern composite card) - info à gauche tronquée,
   actions à droite, infos secondaires derrière un bouton ⋯ */
@media (max-width: 640px) {
  .summary-banner__header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 0 2.5rem 0.65rem 0 !important;
    gap: 0.5rem !important;
  }
  .summary-banner__birth {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    overflow: hidden !important;
  }
  .summary-banner__birth-name {
    font-size: 0.95rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
  }
  .summary-banner__birth-date {
    font-size: 0.76rem !important;
    white-space: nowrap;
  }
  /* Masquer ville + sep ville (dernier sep) mobile → déplacé dans le panneau ⋯ */
  .summary-banner__birth-city { display: none !important; }
  .summary-banner__birth .summary-banner__birth-sep[data-sep]:last-of-type { display: none !important; }

  .summary-banner__header-actions {
    flex: 0 0 auto !important;
    align-self: center !important;
    gap: 0.3rem !important;
  }
  .summary-banner__edit-btn {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.72rem !important;
  }
  .summary-banner__edit-label { display: none; } /* picto crayon seul sur mobile */
  .summary-banner__more-btn { display: inline-flex; padding: 0.35rem 0.5rem !important; }
}

body.light-mode .summary-banner__header { border-bottom-color: rgba(139, 105, 20, 0.15); }
body.light-mode .summary-banner__birth-name { color: #101e3c; }
body.light-mode .summary-banner__birth-date { color: #3a3850; }
body.light-mode .summary-banner__birth-city { color: #7a7690; }
body.light-mode .summary-banner__birth-sep { color: rgba(139,105,20,0.3); }
body.light-mode .summary-banner__edit-btn { border-color: rgba(139,105,20,0.3); color: #8b6914; }
body.light-mode .summary-banner__edit-btn:hover { background: #8b6914; color: #fff; border-color: #8b6914; }
.summary-item { text-align: center; padding: 0.4rem 0.5rem; flex: 1 1 0; min-width: 0; }
.summary-label { display: block; font-size: clamp(0.68rem, 0.9vw, 0.79rem); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 0.2rem; line-height: 1.2; white-space: normal; overflow-wrap: break-word; }
.summary-value { display: block; font-family: var(--font-heading); font-size: clamp(0.95rem, 1.35vw, 1.31rem); color: var(--gold); font-weight: 400; line-height: 1.3; white-space: normal; overflow-wrap: break-word; hyphens: none; }

/* ── Croix d'incarnation : bandeau dédié (full width sous les summary-items) ── */
.summary-cross {
  flex: 1 1 100%;
  order: 50;
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.55rem;
  margin: 0.3rem 0.25rem 0;
  text-align: center;
}
.summary-cross::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--gold-rgb),0.35) 50%, transparent 100%);
}
.summary-cross__ornament {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  opacity: 0.7;
  transform: translateY(1px);
}
.summary-cross .summary-label {
  display: inline-block;
  margin: 0;
  font-size: clamp(0.66rem, 0.85vw, 0.76rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.72;
}
.summary-cross .summary-value {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.45vw, 1.32rem);
  color: var(--gold);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
}

body.light-mode .summary-cross::before {
  background: linear-gradient(90deg, transparent 0%, rgba(139,105,20,0.28) 50%, transparent 100%);
}
body.light-mode .summary-cross .summary-label { color: #3a3850; opacity: 0.8; }
body.light-mode .summary-cross .summary-value { color: #8b6914; }
body.light-mode .summary-cross__ornament { color: #8b6914; }

@media (max-width: 640px) {
  .summary-cross {
    padding: 0.7rem 0.5rem 0.45rem;
    gap: 0.3rem 0.5rem;
  }
  .summary-cross .summary-label { flex: 0 0 auto; }
  .summary-cross .summary-value {
    flex: 1 1 100%;
    font-size: 0.95rem;
  }
}

/* "Voir l'analyse" button at bottom of summary banner */
.summary-analyse-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: 0.5rem auto 0; padding: 0.32rem 1.05rem;
  background: transparent; border: 1px solid var(--gold);
  border-radius: 20px; text-decoration: none;
  color: var(--gold); font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 500; line-height: 1.35;
  letter-spacing: 0.06em; transition: all 0.3s;
  width: fit-content;
}
.summary-analyse-btn:hover {
  background: var(--gold); color: var(--bg-primary);
  transform: translateY(1px);
}
.summary-analyse-btn svg { transition: transform 0.3s; width: 12px; height: 12px; }
.summary-analyse-btn:hover svg { transform: translateY(2px); }

@media (max-width: 640px) {
  .summary-analyse-btn {
    padding: 0.4rem 1.1rem;
    font-size: 0.75rem;
  }
  .summary-analyse-btn svg { width: 14px; height: 14px; }
}

/* Skeleton pulse for loading state (value = "-") */
@keyframes skeletonPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }
body.has-results .results-section:not(.visible) .summary-value {
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* ── Share Bar ── */
.share-bar {
  display: none; align-items: center; gap: 0.6rem;
  justify-content: center;
  width: 100%;
  padding: 1.25rem 0 0.5rem;
  margin: 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.share-bar.visible { display: flex; }
.bodygraph-wrapper.bg-dark .share-bar { border-top-color: rgba(255,255,255,0.08); }
.bodygraph-wrapper.bg-dark .share-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.78); }
.bodygraph-wrapper.bg-dark .share-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.1); }
.share-bar__label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin-right: 0.25rem;
}
.share-btn {
  display: flex; align-items: center; justify-content: center;
  /* WCAG 2.5.5 : 44x44 minimum pour cibles tactiles. */
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s;
}
.share-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.08); }
#share-instagram { display: none; }
@media (max-width: 768px) { #share-instagram { display: flex; } }
.share-btn.shared { border-color: #4caf50; color: #4caf50; }
.share-btn--analyse {
  width: auto !important; height: auto !important;
  min-height: 36px; border-radius: 20px !important;
  padding: 0.5rem 1.1rem; gap: 0.4rem;
  background: linear-gradient(135deg, var(--gold) 0%, #b8942e 100%) !important;
  border-color: var(--gold) !important; color: #050c1c !important;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  line-height: 1.2;
}
.share-btn--analyse:hover { background: linear-gradient(135deg, #d4b44a 0%, var(--gold) 100%) !important; color: #050c1c !important; }
.share-btn--analyse svg { width: 16px; height: 16px; flex-shrink: 0; }
.bodygraph-wrapper.bg-dark .share-btn--analyse {
  background: linear-gradient(135deg, var(--gold) 0%, #b8942e 100%) !important;
  border-color: var(--gold) !important; color: #050c1c !important;
}

/* ── Separator after share bar ── */
.share-separator {
  border: none; border-top: 1px solid var(--border);
  margin: 1rem auto 1.5rem; max-width: 200px;
}

/* ── Embed Modal ── */
.embed-modal {
  display: none; position: fixed; inset: 0; z-index: var(--z-modal-backdrop);
  background: rgba(0,0,0,0.7); align-items: center; justify-content: center;
}
.embed-modal.open { display: flex; }
.embed-modal__inner {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem; max-width: 700px; width: 90%;
  max-height: 90vh; overflow-y: auto;
}
.embed-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.embed-modal__header h4 { margin: 0; font-size: 1rem; color: var(--text-primary); }
.embed-modal__close {
  background: none; border: none; color: var(--text-muted); font-size: 1.5rem;
  cursor: pointer; padding: 0; line-height: 1;
}
.embed-modal__close:hover { color: var(--text-primary); }
.embed-modal__code {
  width: 100%; padding: 0.75rem; border-radius: 6px;
  background: var(--bg-primary); border: 1px solid var(--border);
  color: var(--gold-light); font-family: monospace; font-size: 0.75rem;
  resize: none; box-sizing: border-box;
}
.embed-modal__copy {
  margin-top: 0.75rem; padding: 0.5rem 1.25rem;
  background: var(--gold); color: var(--bg-primary); border: none;
  border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem;
}
.embed-modal__copy:hover { opacity: 0.85; }
.embed-modal__copy.copied { background: #4caf50; }

/* ── Popup CPT (Type/Profil/Autorité/Définition/Croix depuis le BG) ── */
.cpt-modal {
  display: none; position: fixed; inset: 0;
  z-index: var(--z-modal-top, 9800);
  align-items: center; justify-content: center;
}
.cpt-modal.open { display: flex; }
.cpt-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.cpt-modal__box {
  position: relative; z-index: 1;
  background: var(--bg-card, #0b1428);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 14px;
  width: 92%; max-width: 960px;
  height: 88vh; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.cpt-modal__header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  background: var(--bg-secondary, #101e3c);
  flex: 0 0 auto;
}
.cpt-modal__title {
  flex: 1 1 auto; margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 0.95rem; font-weight: 500;
  color: var(--text-primary, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpt-modal__open,
.cpt-modal__close {
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted, #aaa); border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.cpt-modal__close { font-size: 1.6rem; line-height: 1; }
.cpt-modal__open:hover,
.cpt-modal__close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary, #fff);
}
body.light-mode .cpt-modal__open:hover,
body.light-mode .cpt-modal__close:hover {
  background: rgba(0,0,0,0.06);
}
.cpt-modal__content {
  flex: 1 1 auto; position: relative;
  overflow: hidden;
  background: var(--bg-primary, #050c1c);
  min-height: 200px;
}
.cpt-modal__iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
  background: var(--bg-primary, #050c1c);
}
.cpt-modal__loader {
  position: absolute; inset: 0; z-index: 2;
  display: none; align-items: center; justify-content: center;
  background: var(--bg-primary, #050c1c);
  color: var(--gold, #c9a84c);
  font-size: 0.9rem; letter-spacing: 0.04em;
  pointer-events: none;
}
.cpt-modal.is-loading .cpt-modal__loader { display: flex; }
@media (max-width: 768px) {
  .cpt-modal__box {
    width: 100%; height: 100vh; height: 100dvh;
    max-width: 100%; max-height: 100dvh;
    border-radius: 0; border: 0;
  }
  .cpt-modal__header { padding: 0.6rem 0.75rem; padding-top: max(0.6rem, env(safe-area-inset-top)); }
  .cpt-modal__title { font-size: 0.9rem; }
}

/* Mode "popup CPT" : la page CPT est servie en iframe depuis le BG.
   On masque header/footer/nav/toasts pour rendre uniquement le contenu. */
body.is-cpt-modal .site-header,
body.is-cpt-modal .site-footer,
body.is-cpt-modal .global-nav,
body.is-cpt-modal .app-bottom-nav,
body.is-cpt-modal .nav-float,
body.is-cpt-modal .nav-bg-float,
body.is-cpt-modal .help-launcher,
body.is-cpt-modal .pwa-install-toast,
body.is-cpt-modal .pwa-install-pop,
body.is-cpt-modal .admin-bar,
body.is-cpt-modal #wpadminbar,
body.is-cpt-modal .breadcrumb,
body.is-cpt-modal .nav-bg-banner,
body.is-cpt-modal .signup-popup,
body.is-cpt-modal .pwa-tour { display: none !important; }
body.is-cpt-modal { padding-top: 0 !important; margin-top: 0 !important; }
body.is-cpt-modal .guide-wrapper,
body.is-cpt-modal .guide-layout { padding-top: 0; margin-top: 0; }
body.is-cpt-modal main { padding-top: 1rem; }

/* ── Chart Recap ── */
.chart-recap {
  display: none;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem 2rem; margin-top: 20px; margin-bottom: 2rem;
}
.chart-recap.visible { display: block; }
.chart-recap__title {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400;
  color: var(--text-primary); margin: 0 0 1.25rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid rgba(201,168,76,0.15);
}
.chart-recap__title span { color: var(--gold); }
.chart-recap__grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.chart-recap__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.chart-recap__row:nth-child(odd) { background: rgba(255,255,255,0.015); }
.chart-recap__label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); flex-shrink: 0;
}
.chart-recap__val {
  font-size: 0.9rem; color: var(--text-primary); text-align: right;
  font-weight: 500;
}
.chart-recap__val--gold { color: var(--gold); }
.chart-recap__link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(201,168,76,0.4); transition: border-color 0.2s; }
.chart-recap__link:hover { border-bottom-color: var(--gold); }

h4.chart-recap__section {
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 400;
  color: var(--gold-light); margin: 1.25rem 0 0.5rem;
  padding-top: 0.75rem; border-top: 1px solid rgba(201,168,76,0.12);
  letter-spacing: 0.03em;
}
.chart-recap__section {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid rgba(201,168,76,0.12);
}
.chart-recap__section-title {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 500;
  margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
.chart-recap__section-title--p { color: var(--text-primary); }
.chart-recap__section-title--d { color: var(--red-hd-light); }

.chart-recap__planet-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.chart-recap__planet {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem; border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem;
}
.chart-recap__planet-sym { font-size: 1rem; flex-shrink: 0; width: 1.2rem; text-align: center; }
.chart-recap__planet-name { color: var(--text-muted); font-size: 0.7rem; min-width: 55px; }
.chart-recap__planet-gate { color: var(--text-primary); font-weight: 600; }
.chart-recap__planet-info { color: var(--text-muted); font-size: 0.75rem; }

@media (max-width: 768px) {
  .chart-recap__grid { grid-template-columns: 1fr; }
  .chart-recap__planet-grid { grid-template-columns: 1fr; }
  .chart-recap { padding: 1rem 1.25rem; }
}

/* ── Body Graph Wrapper (fond blanc) ── */
.bodygraph-wrapper {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;
  background: #ffffff; border-radius: 16px; padding: 10px 20px 10px 50px;
  margin-bottom: 2rem; box-shadow: 0 4px 30px rgba(0,0,0,0.3);
  position: relative; overflow: visible;
}
.bodygraph-wrapper > .share-bar { flex-basis: 100%; order: 99; }


/* Credits + engine pill (integrated at bottom of body graph container) */
.bg-credits-pill {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; align-items: stretch; height: 24px;
  border-radius: 12px; overflow: hidden;
  background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-body, inherit);
}
.bg-credits-pill__icon,
.bg-credits-pill__engine {
  background: transparent; border: none; cursor: pointer;
  color: rgba(0,0,0,0.5); line-height: 1;
  display: inline-flex; align-items: center; transition: all 0.2s;
}
.bg-credits-pill__icon {
  padding: 0 9px;
  font-size: 13px; font-weight: 700;
}
/* Bouton moteur devenu obsolète - switch désormais dans la popup.
   Conservé pour compat de pages qui l'auraient encore hardcodé. */
.bg-credits-pill__engine { display: none !important; }
.bg-credits-pill__icon:hover,
.bg-credits-pill__engine:hover { color: rgba(0,0,0,0.85); background: rgba(0,0,0,0.06); }
.bodygraph-wrapper.bg-dark .bg-credits-pill {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);
}
.bodygraph-wrapper.bg-dark .bg-credits-pill__icon {
  color: rgba(255,255,255,0.78); border-right-color: rgba(255,255,255,0.1);
}
.bodygraph-wrapper.bg-dark .bg-credits-pill__engine { color: rgba(255,255,255,0.78); }
.bodygraph-wrapper.bg-dark .bg-credits-pill__icon:hover,
.bodygraph-wrapper.bg-dark .bg-credits-pill__engine:hover {
  color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.08);
}
@media (max-width: 768px) {
  .bg-credits-pill {
    bottom: -14px;
    height: auto;
    min-height: 28px;
    max-width: calc(100% - 20px);
    background: rgba(10, 15, 30, 0.92);
    border: 1px solid rgba(201, 168, 76, 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .bg-credits-pill__icon,
  .bg-credits-pill__engine { color: rgba(242, 216, 138, 0.95); }
  .bg-credits-pill__engine {
    font-size: 0.72rem;
    padding: 5px 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    min-width: 0;
  }
  .bg-credits-pill__icon {
    padding: 5px 8px 5px 10px;
    font-size: 13px;
    line-height: 1.2;
    border-right: 1px solid rgba(201, 168, 76, 0.35);
  }
  .bg-credits-pill__icon:hover,
  .bg-credits-pill__engine:hover {
    color: #fff;
    background: rgba(201, 168, 76, 0.2);
  }
  /* Light mode mobile : pastille claire avec texte foncé */
  body.light-mode .bg-credits-pill,
  .bodygraph-wrapper:not(.bg-dark) .bg-credits-pill {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(139, 105, 20, 0.45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  body.light-mode .bg-credits-pill .bg-credits-pill__icon,
  body.light-mode .bg-credits-pill .bg-credits-pill__engine,
  .bodygraph-wrapper:not(.bg-dark) .bg-credits-pill__icon,
  .bodygraph-wrapper:not(.bg-dark) .bg-credits-pill__engine {
    color: #6b4e10;
  }
  .bodygraph-wrapper:not(.bg-dark) .bg-credits-pill__icon {
    border-right-color: rgba(139, 105, 20, 0.3);
  }
  /* Variant 'corner' sur mobile : pastille parfaitement ronde (un seul picto ©) */
  .bg-credits-pill.bg-credits-pill--corner {
    width: 28px; height: 28px; min-height: 28px;
    padding: 0; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bg-credits-pill.bg-credits-pill--corner .bg-credits-pill__icon {
    width: 100%; height: 100%;
    padding: 0; border-right: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* Variant 'corner' : pill positionné en haut-gauche du wrapper BG, discret */
.bg-credits-pill--corner {
  position: absolute;
  top: 10px;
  left: 12px;
  bottom: auto;
  transform: none;
  z-index: 6;
  height: 22px;
  opacity: 0.55;
  transition: opacity 0.18s;
}
.bg-credits-pill--corner:hover { opacity: 1; }

/* ── Bouton « Enregistrer » - remplace le picto cœur historique ──
   Position : top-right du wrapper BG (où vivait .bodygraph-heart-btn).
   État non-enregistré : pastille translucide subtile (cœur en outline).
   État enregistré (.is-saved) : cœur rempli en rouge - signal explicite.
   Hauteur 36px alignée sur le visuel des bodygraph-modes-group (action btn
   ~30px + 3px padding + 1px border = ~38px) pour un alignement vertical
   propre avec la barre d'actions à gauche. */
.bg-save-pill--corner {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.85);
  color: #555;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.bg-save-pill--corner:hover {
  background: #ffffff;
  color: #e74c5e;
  border-color: rgba(231, 76, 94, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.bg-save-pill--corner:hover .heart-path {
  stroke: #e74c5e;
}
.bg-save-pill--corner:active { transform: translateY(0); }
.bg-save-pill--corner:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.bg-save-pill__icon { flex-shrink: 0; }
/* État saved : cœur RED rempli ; pastille reste subtile (juste accent rouge sur le cœur). */
.bg-save-pill.is-saved {
  color: #c0392b;
  border-color: rgba(231, 76, 94, 0.45);
  background: rgba(255, 255, 255, 0.92);
}
.bg-save-pill.is-saved:hover {
  background: #ffffff;
  border-color: rgba(231, 76, 94, 0.65);
}
.bg-save-pill.is-saved .heart-path { fill: #e74c5e; stroke: #e74c5e; }
/* Mode sombre du BG : pastille translucide foncée, restant lisible. */
.bodygraph-wrapper.bg-dark .bg-save-pill--corner {
  background: rgba(30, 33, 64, 0.85);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
}
.bodygraph-wrapper.bg-dark .bg-save-pill--corner:hover {
  background: rgba(30, 33, 64, 1);
  color: #ff6b7a;
  border-color: rgba(255, 107, 122, 0.45);
}
.bodygraph-wrapper.bg-dark .bg-save-pill--corner:hover .heart-path { stroke: #ff6b7a; }
.bodygraph-wrapper.bg-dark .bg-save-pill.is-saved {
  background: rgba(30, 33, 64, 0.92);
  color: #ff6b7a;
  border-color: rgba(255, 107, 122, 0.5);
}
.bodygraph-wrapper.bg-dark .bg-save-pill.is-saved .heart-path { fill: #ff6b7a; stroke: #ff6b7a; }
/* Mobile : pastille un peu plus haute pour cible tactile WCAG. */
@media (max-width: 768px) {
  .bg-save-pill--corner {
    top: 10px;
    right: 10px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }
  /* Wrapper BG étroit : on garde juste le cœur, on retire le label. */
  @media (max-width: 380px) {
    .bg-save-pill--corner { padding: 0 10px; gap: 4px; }
    .bg-save-pill__label { display: none; }
  }
}
.bg-credits-pill--corner .bg-credits-pill__icon { font-size: 12px; padding: 0 6px 0 8px; }
.bg-credits-pill--corner .bg-credits-pill__engine { font-size: 0.62rem; padding: 0 9px; }

/* Raccourci « Voir l'analyse » - positionné juste sous la pastille crédits
   (en haut-gauche du wrapper BG). Rappel du CTA principal pour les users
   qui ont scrollé jusqu'au BG sans voir le bouton du summary banner. */
/* Bouton "Voir l'analyse" - positionné EN HAUT CENTRÉ au-dessus du BG,
   plus visible (plus grand, avec glow doré), bien intégré mode jour/nuit. */
.bg-analyse-shortcut {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1510;
  background: linear-gradient(135deg, #e6c878 0%, #c9a84c 100%);
  border: 1px solid rgba(139,105,20,0.55);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(201,168,76,0.35), 0 0 0 1px rgba(255,255,255,0.15) inset;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.bg-analyse-shortcut:hover,
.bg-analyse-shortcut:focus-visible {
  background: linear-gradient(135deg, #f2d88a 0%, #d4b358 100%);
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,168,76,0.55), 0 0 0 1px rgba(255,255,255,0.25) inset;
  color: #0d0a08;
}
.bg-analyse-shortcut svg {
  width: 14px;
  height: 14px;
}
/* Dark theme (site): garder le fond doré solide, juste ombres plus marquées */
body:not(.light-mode) .bg-analyse-shortcut {
  box-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 16px rgba(201,168,76,0.35), 0 0 0 1px rgba(255,255,255,0.18) inset;
}
body:not(.light-mode) .bg-analyse-shortcut:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 22px rgba(201,168,76,0.55), 0 0 0 1px rgba(255,255,255,0.28) inset;
}
/* Light mode : même palette dorée (contraste préservé sur fond clair) */
body.light-mode .bg-analyse-shortcut {
  color: #1a1510;
  box-shadow: 0 2px 8px rgba(139,105,20,0.25), 0 0 0 1px rgba(255,255,255,0.4) inset;
}
body.light-mode .bg-analyse-shortcut:hover {
  box-shadow: 0 4px 14px rgba(139,105,20,0.4), 0 0 0 1px rgba(255,255,255,0.55) inset;
}
@media (max-width: 768px) {
  .bg-analyse-shortcut {
    top: 8px;
    font-size: 0.68rem;
    padding: 0.45rem 0.9rem;
    letter-spacing: 0.1em;
  }
  .bg-analyse-shortcut svg { width: 12px; height: 12px; }
}
@media (max-width: 480px) {
  .bg-analyse-shortcut {
    font-size: 0.62rem;
    padding: 0.4rem 0.75rem;
    gap: 0.35rem;
  }
}
/* Le panneau "Filtres" (vue Quantum/Design + calques) n'a aucun sens sur
   le layout composite : il pilote un BG simple unique via data-layer,
   alors que le composite utilise une logique propre (3 BG, couleurs
   owner, ornements rose/violet/orange). Masquer totalement. */
body.is-composite-mode .bodygraph-legend,
body.is-composite-mode #bodygraph-legend { display: none !important; }

/* Par défaut sur smartphone, masquer les colonnes "Activations" (planètes
   gauche/droite) du BG simple. La largeur d'écran mobile ne permet pas
   une lecture confortable de ces colonnes en plus du BG. L'utilisateur
   peut toujours les afficher en cochant la checkbox "Activations" dans
   le panneau Filtres : applyLegendState pose alors la classe
   .bg-activations-on sur #bodygraph-wrapper, ce qui désactive cette règle.
   Exclu du mode composite (qui retire déjà les activations du DOM). */
@media (max-width: 768px) {
  body:not(.is-composite-mode) #bodygraph-wrapper:not(.bg-activations-on) #bodygraph-container [data-layer="activations"] {
    display: none;
  }
}

/* En vue fullscreen (BG simple ou composite), cacher tout ce qui n'est pas
   le SVG du Body Graph lui-même : bouton "Voir l'analyse", blocs de
   synthèse sous les BG, noms, filtres, légendes. Le BG s'affiche seul et
   nu, contemplation pure. */
#bodygraph-wrapper.is-fullscreen .bg-analyse-shortcut,
body.is-composite-mode #bodygraph-wrapper.is-fullscreen .bg-analyse-shortcut,
#bodygraph-wrapper.is-fullscreen .comp-side-synth,
#bodygraph-wrapper.is-fullscreen .comp-center-synth,
#bodygraph-wrapper.is-fullscreen .comp-side-name,
#bodygraph-wrapper.is-fullscreen .comp-side-label,
#bodygraph-wrapper.is-fullscreen .comp-layout-filters,
#bodygraph-wrapper.is-fullscreen .composite-legend,
#bodygraph-wrapper.is-fullscreen #summary-banner,
#bodygraph-wrapper.is-fullscreen .summary-banner,
#bodygraph-wrapper.is-fullscreen .svg-synth-link,
#bodygraph-wrapper.is-fullscreen .svg-synth-label,
#bodygraph-wrapper.is-fullscreen .svg-synth-value,
#bodygraph-wrapper.is-fullscreen .svg-synth-sub {
  display: none !important;
}

/* Liens cliquables dans le SVG du cartouche (synthèse + croix) - feedback
   visuel discret au survol pour signaler que c'est cliquable. */
.svg-chart-label-group a.svg-synth-link {
  cursor: pointer;
  transition: opacity 0.18s ease, filter 0.18s ease;
}
.svg-chart-label-group a.svg-synth-link:hover,
.svg-chart-label-group a.svg-synth-link:focus-visible {
  opacity: 0.85;
  filter: brightness(1.15);
  outline: none;
}

/* Legacy : pill vit dans le bloc Vue (.bodygraph-legend) - conservé pour
   les contextes qui n'utilisent pas la variante 'corner'. */
.bodygraph-legend .bg-credits-pill {
  position: static;
  left: auto; bottom: auto; transform: none;
  margin: 10px auto;
  display: flex; justify-content: center;
  width: max-content; max-width: 100%;
}
body.light-mode .bodygraph-legend .bg-credits-pill {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
body:not(.light-mode) .bodygraph-legend .bg-credits-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
body:not(.light-mode) .bodygraph-legend .bg-credits-pill__icon {
  color: rgba(255,255,255,0.55);
  border-right-color: rgba(255,255,255,0.1);
}
body:not(.light-mode) .bodygraph-legend .bg-credits-pill__engine {
  color: rgba(255,255,255,0.55);
}
body:not(.light-mode) .bodygraph-legend .bg-credits-pill__icon:hover,
body:not(.light-mode) .bodygraph-legend .bg-credits-pill__engine:hover {
  color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.08);
}

/* Credits modal */
.bg-credits-modal {
  position: fixed; inset: 0; z-index: var(--z-top);
  display: flex; align-items: center; justify-content: center;
}
.bg-credits-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5,12,28,0.7); backdrop-filter: blur(4px);
}
.bg-credits-modal__box {
  position: relative; z-index: 1;
  background: var(--bg-card, #0d1830); border: 1px solid rgba(201,168,76,0.15);
  border-radius: 16px; padding: 2rem; max-width: 520px; width: 92%; max-height: 85vh; overflow-y: auto;
}
body.light-mode .bg-credits-modal__box { background: #fff; border-color: rgba(0,0,0,0.1); }
.bg-credits-modal__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.bg-credits-modal__title {
  font-family: var(--font-heading); font-size: 1.1rem; color: var(--gold); margin: 0 0 1rem;
}
.bg-credits-modal__active {
  font-size: 0.82rem; color: var(--gold); margin: 0 0 0.8rem;
  padding: 0.4rem 0.8rem; border-radius: 8px;
  background: rgba(201,168,76,0.1); text-align: center; font-weight: 600;
}
.bg-credits-modal__intro {
  font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1rem; line-height: 1.6;
}
.bg-credits-modal__section {
  padding: 0.8rem; border-radius: 10px; margin-bottom: 0.8rem;
  border: 1px solid rgba(201,168,76,0.08); background: rgba(255,255,255,0.02);
  transition: border-color 0.3s, background 0.3s;
}
.bg-credits-modal__section--active {
  border-color: rgba(201,168,76,0.25); background: rgba(201,168,76,0.06);
}
body.light-mode .bg-credits-modal__section { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
body.light-mode .bg-credits-modal__section--active { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.2); }
.bg-credits-modal__section h4 {
  font-size: 0.95rem; color: var(--text-primary); margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.5rem;
}
.bg-credits-modal__badge {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gold); background: rgba(201,168,76,0.15); padding: 0.1rem 0.5rem;
  border-radius: 20px; font-weight: 700;
}
.bg-credits-modal__badge:empty { display: none; }
.bg-credits-modal__features {
  list-style: none; padding: 0; margin: 0.4rem 0;
}
.bg-credits-modal__features li {
  font-size: 0.78rem; color: var(--text-secondary, var(--text-muted)); line-height: 1.6;
  padding-left: 1rem; position: relative;
}
.bg-credits-modal__features li::before {
  content: '\2022'; position: absolute; left: 0; color: var(--gold); font-weight: bold;
}
.bg-credits-modal__license {
  font-size: 0.75rem; color: var(--text-muted); margin: 0.3rem 0 0.2rem; font-style: italic;
}
.bg-credits-modal__section p {
  font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.3rem; line-height: 1.5;
}
.bg-credits-modal__section a {
  font-size: 0.82rem; color: var(--gold); text-decoration: none;
}
.bg-credits-modal__section a:hover { text-decoration: underline; }
.bg-credits-modal__note {
  font-size: 0.75rem; color: var(--text-muted); margin: 0.5rem 0 0;
  line-height: 1.6; font-style: italic; opacity: 0.85;
  padding-top: 0.6rem; border-top: 1px solid rgba(201,168,76,0.1);
}

/* ── Switch moteur dans la popup crédits ── */
.bg-credits-modal__switch {
  display: flex; gap: 0.4rem;
  padding: 0.3rem; margin: 0.75rem 0 1rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 10px;
}
.bg-credits-modal__switch-btn {
  flex: 1 1 0;
  background: transparent; border: 0;
  padding: 0.55rem 0.8rem;
  font-family: var(--font-body, inherit); font-size: 0.82rem;
  font-weight: 500; letter-spacing: 0.02em;
  color: var(--text-secondary);
  cursor: pointer; border-radius: 7px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.bg-credits-modal__switch-btn:hover { color: var(--gold); }
.bg-credits-modal__switch-btn.is-active {
  background: var(--gold); color: #1a1510;
  box-shadow: 0 2px 6px rgba(201,168,76,0.3);
  cursor: default;
}
.bg-credits-modal__switch-btn[disabled] {
  opacity: 0.5; cursor: not-allowed;
}
body.light-mode .bg-credits-modal__switch { background: rgba(201,168,76,0.08); }

/* ── Bloc "Différences pour ce chart" ── */
.bg-credits-modal__diff {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 8px;
  font-size: 0.85rem;
}
.bg-credits-modal__diff-title {
  display: flex; align-items: center; gap: 0.35rem;
  margin: 0 0 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.bg-credits-modal__diff-none {
  margin: 0; font-style: italic; color: var(--text-muted); font-size: 0.82rem;
}
.bg-credits-modal__diff-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.bg-credits-modal__diff-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.82rem;
  line-height: 1.4;
}
.bg-credits-modal__diff-list li strong {
  font-weight: 500; color: var(--text-secondary);
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.bg-credits-modal__diff-arrow { color: var(--gold); font-weight: 700; margin: 0 0.25rem; }
body.light-mode .bg-credits-modal__diff,
.bg-credits-modal__diff { background: rgba(201,168,76,0.06); }
@media (max-width: 480px) {
  .bg-credits-modal__switch-btn { font-size: 0.76rem; padding: 0.5rem 0.5rem; }
  .bg-credits-modal__diff-list li { grid-template-columns: 76px 1fr; font-size: 0.78rem; }
}

/* Picto cœur historique remplacé par .bg-save-pill (cf. plus haut).
   Masqué en CSS pour ne pas toucher au markup (les handlers JS l'écoutent
   encore mais sans effet visible). */
.bodygraph-heart-btn,
.bodygraph-signup-btn { display: none !important; }
.bodygraph-wrapper.bg-dark .bodygraph-signup-btn {
  background: rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.4); color: var(--gold-light);
}
.bodygraph-wrapper.bg-dark .bodygraph-signup-btn:hover { background: var(--gold); color: #050c1c; }

/* Action buttons (download + fullscreen + day/night).
   Décalé vers la gauche pour laisser la place à .bg-save-pill--corner
   (bouton « Enregistrer ») qui occupe le coin top-right. Largeur estimée
   du pill ≈ 130px + 12px gap = 142px. */
.bodygraph-actions {
  position: absolute; top: 0.75rem; right: calc(0.75rem + 142px);
  display: flex; flex-direction: row; gap: 8px; z-index: 10;
  align-items: center;
}
.bodygraph-modes-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 14px;
  padding: 3px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 9px;
}
.bodygraph-wrapper.bg-dark .bodygraph-modes-group {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.bodygraph-modes-group .bodygraph-action-btn {
  border: 1px solid transparent;
  background: transparent;
}
.bodygraph-modes-group .bodygraph-action-btn:hover {
  background: rgba(0,0,0,0.08);
}
.bodygraph-wrapper.bg-dark .bodygraph-modes-group .bodygraph-action-btn:hover {
  background: rgba(255,255,255,0.08);
}
.bodygraph-mode-btn.bg-mode-active,
.bodygraph-modes-group .transit-active,
.bodygraph-modes-group .dream-active,
.bodygraph-modes-group .gk-active {
  background: var(--gold) !important;
  color: #050c1c !important;
  border-color: var(--gold) !important;
}
.bodygraph-action-btn {
  background: rgba(0,0,0,0.07); border: 1px solid rgba(0,0,0,0.15);
  border-radius: 7px; padding: 0.45rem; cursor: pointer;
  color: #555; transition: all 0.2s; display: flex; align-items: center;
}
.bodygraph-action-btn:hover { background: rgba(0,0,0,0.14); color: #222; }
#btn-engine-toggle .engine-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1; }
.engine-toggle-wrap { position: relative; display: flex; gap: 0.25rem; }
.engine-info-btn { padding: 0.3rem !important; }
.engine-infobox {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  width: 340px; max-width: 90vw; padding: 1.25rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary);
}
.engine-infobox.open { display: block; }
.engine-infobox__close {
  position: absolute; top: 0.5rem; right: 0.75rem;
  background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer;
}
.engine-infobox__close:hover { color: var(--text-primary); }
.engine-infobox h4 { font-family: var(--font-heading); font-size: 1rem; color: var(--gold); margin: 0 0 0.5rem; font-weight: 500; }
.engine-infobox h4:nth-of-type(2) { margin-top: 1rem; }
.engine-infobox p { margin: 0 0 0.5rem; }
.engine-infobox ul { margin: 0.5rem 0; padding-left: 1.25rem; }
.engine-infobox li { margin-bottom: 0.4rem; }
.engine-infobox__card {
  padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.engine-infobox__card strong { color: var(--text-primary); font-size: 0.85rem; }
.engine-infobox__card p { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--text-muted); }
.engine-infobox__badge {
  font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 4px;
  background: rgba(201,168,76,0.15); color: var(--gold); margin-left: 0.4rem;
  vertical-align: middle;
}
.engine-infobox__note { font-size: 0.75rem; color: var(--text-muted); font-style: italic; margin-top: 0.75rem; }
body.light-mode .engine-infobox { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
body.light-mode .engine-infobox__card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
.bodygraph-save-btn.saved { color: #e74c5e; }
.bodygraph-save-btn.saved .heart-path { fill: #e74c5e; stroke: #e74c5e; }

/* Fullscreen mode */
.bodygraph-wrapper.is-fullscreen {
  position: fixed; inset: 0; z-index: 9000; border-radius: 0;
  padding: 1%; margin-bottom: 0; max-width: 100%; width: 100%;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: stretch;
  background: #ffffff;  /* fallback explicite pour le mode natif fullscreen */
  overflow: hidden;
  box-shadow: none;
}
.bodygraph-wrapper.is-fullscreen.bg-dark {
  background: #050c1c;  /* dark theme : conserve le fond sombre choisi par l'user */
}
.bodygraph-wrapper.is-fullscreen .bodygraph-container {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  width: 100%;
}
.bodygraph-wrapper.is-fullscreen .bodygraph-container svg {
  /* Sur un SVG inline avec viewBox, width:100% + height:100% + preserveAspectRatio
     (par défaut "xMidYMid meet") fait scale le contenu pour fit le container
     tout en préservant le ratio. La règle non-fullscreen `width:90%` est annulée. */
  width: 100% !important;
  height: 100% !important;
  display: block;
  margin: 0;
}
.bodygraph-wrapper.is-fullscreen .bodygraph-actions { top: 0.75rem; right: calc(0.75rem + 142px); }

/* Fullscreen sidebar: horizontal bar at bottom */
.bodygraph-wrapper.is-fullscreen .bodygraph-sidebar {
  flex: none; width: 100%; margin-top: 0.5rem;
}
.bodygraph-wrapper.is-fullscreen .bodygraph-legend {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
  padding: 0.6rem 0.75rem; margin-top: 0.5rem;
  background: rgba(248,247,244,0.95); border-radius: 8px;
  border: 1px solid #e0ddd5;
}
.bodygraph-wrapper.is-fullscreen .bodygraph-legend .legend-title { margin: 0; font-size: 0.8rem; white-space: nowrap; }
.bodygraph-wrapper.is-fullscreen .bodygraph-legend .legend-title:nth-of-type(2) { margin-top: 0; }
.bodygraph-wrapper.is-fullscreen .view-modes { display: flex; flex-direction: row; gap: 0.3rem; margin-bottom: 0; }
.bodygraph-wrapper.is-fullscreen .view-desc { display: none; }
.bodygraph-wrapper.is-fullscreen .legend-items { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.3rem 0.75rem; }
.bodygraph-wrapper.is-fullscreen .legend-toggle { font-size: 0.7rem; }
.bodygraph-wrapper.is-fullscreen .view-btn { padding: 0.25rem 0.5rem; font-size: 0.7rem; }

.bodygraph-container {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 400px; position: relative;
  margin-bottom: 18px; /* réserve l'espace pour la pastille crédits qui déborde */
  padding-top: 48px; /* dégage la zone des pictos toolbar (hauteur ~38px + marge) */
}
/* Mode transit : le titre SVG doit remonter au même niveau que le titre BG
   normal. Comme le panneau transit occupe lui-même le haut de la zone, on
   réduit le padding réservé aux pictos toolbar (toujours visibles mais plus
   compacts visuellement en mode transit). */
body.is-transit-mode .bodygraph-container { padding-top: 8px; }
.bodygraph-container svg { width: 90%; height: auto; display: block; margin: 0 auto; }

@media (max-width: 768px) {
  .bodygraph-container { min-height: unset; }
  .bodygraph-container svg { width: 90%; max-height: none; height: auto; }
  .bodygraph-wrapper { padding: 10px; gap: 0.75rem; width: 100%; }
  .bodygraph-legend { padding: 0.75rem; }
}

/* ── Sidebar BG (mini-controls transit + légende) ── */
.bodygraph-sidebar {
  flex: 0 0 240px;
  margin-top: 120px;
  display: flex; flex-direction: column; gap: 0.85rem;
}
/* ── Légende ── */
.bodygraph-legend {
  padding: 1.2rem;
  background: #f8f7f4; border-radius: 10px; border: 1px solid #e0ddd5;
}
.legend-title { font-family: var(--font-heading); font-size: 1.3rem; color: #333; margin-bottom: 0.9rem; font-weight: 500; }
.legend-items { display: flex; flex-direction: column; gap: 0.6rem; }
.legend-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #555; line-height: 1.3; }
.legend-swatch { display: inline-block; width: 19px; height: 19px; border-radius: 3px; flex-shrink: 0; }
.legend-swatch--personality { background: #333; }
.legend-swatch--design { background: #e74c5e; }
.legend-swatch--both { background: linear-gradient(90deg, #333 50%, #e74c5e 50%); }
.legend-swatch--defined { background: rgba(201,168,76,0.4); border: 2px solid var(--gold); }
.legend-swatch--undefined { background: #fff; border: 2px solid #ccc; }
.legend-swatch--channel { background: rgba(100,100,100,0.3); width: 19px; height: 5px; border-radius: 2px; }
.legend-swatch--dormant { background: rgba(100,100,100,0.15); width: 19px; height: 5px; border-radius: 2px; }
/* ── Dark mode for legend/filters ── */
.bodygraph-wrapper.bg-dark .bodygraph-legend {
  background: #0b1428; border-color: rgba(255,255,255,0.1);
}
.bodygraph-wrapper.bg-dark .legend-title { color: #e0e0e0; }
.bodygraph-wrapper.bg-dark .view-btn {
  background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.15);
}
.bodygraph-wrapper.bg-dark .view-btn:hover { border-color: rgba(255,255,255,0.35); }
.bodygraph-wrapper.bg-dark .view-btn.active {
  background: rgba(201,168,76,0.15); color: var(--gold); border-color: var(--gold);
}
.bodygraph-wrapper.bg-dark .view-desc { color: #bbb; }
.bodygraph-wrapper.bg-dark .legend-toggle { color: #fff; }
.bodygraph-wrapper.bg-dark .legend-item { color: #fff; }
.bodygraph-wrapper.bg-dark .legend-toggle input[type="checkbox"] { accent-color: var(--gold); }
.bodygraph-wrapper.bg-dark .legend-check-all {
  border-color: rgba(255,255,255,0.15); color: #aaa;
}
.bodygraph-wrapper.bg-dark .legend-check-all:hover { border-color: var(--gold); color: var(--gold); }
.bodygraph-wrapper.bg-dark .bodygraph-action-btn {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #ccc;
}
.bodygraph-wrapper.bg-dark .bodygraph-action-btn:hover {
  background: rgba(255,255,255,0.15); color: #fff;
}
.bodygraph-wrapper.bg-dark .bodygraph-action-btn.gk-active {
  background: var(--gold); color: #fff; border-color: var(--gold);
}
.bodygraph-wrapper.bg-dark .engine-infobox {
  background: #0b1428; border-color: rgba(201,168,76,0.15);
}
.bodygraph-wrapper.bg-dark .engine-infobox__card {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
}

/* ── View mode buttons ── */
.view-modes { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.view-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: #f0ede6; border: 2px solid transparent; border-radius: 8px;
  padding: 0.55rem 0.75rem; cursor: pointer; font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 500; color: #555; transition: all var(--transition);
}
.view-btn:hover { border-color: #ccc; }
.view-btn.active { border-color: var(--gold); background: #faf6eb; color: #333; font-weight: 600; }
.view-btn__swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.view-btn__swatch--quantum { background: linear-gradient(135deg, #333 45%, #d04050 55%); }
.view-btn__swatch--personality { background: #333; }
.view-btn__swatch--design { background: #d04050; }
.view-desc { font-size: 0.7rem; color: #999; line-height: 1.4; margin-bottom: 0; font-style: italic; }

.legend-swatch--gate { background: #555; border-radius: 50%; font-size: 7px; text-align: center; line-height: 16px; color: #fff; }
.legend-swatch--gate::after { content: '42'; }
.legend-swatch--bg { background: rgba(0,0,0,0.06); border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
.legend-swatch--arrows { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 10px solid #555; }
.legend-swatch--variables { background: #4caf50; border-radius: 3px; font-size: 8px; text-align: center; line-height: 16px; color: #fff; }
.legend-swatch--variables::after { content: '4'; }
.legend-swatch--activations { background: linear-gradient(90deg, #333 50%, #e74c5e 50%); border-radius: 3px; }

.legend-toggle {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; color: #555; cursor: pointer;
  line-height: 1.3; user-select: none;
  /* Hitbox WCAG 2.5.5 : au moins 44px de haut, la checkbox reste visuellement petite */
  min-height: 44px;
  padding: 0.25rem 0;
}
.legend-toggle input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--gold);
  cursor: pointer; flex-shrink: 0;
}
.legend-check-all {
  background: none; border: 1px solid #ccc; border-radius: 5px;
  padding: 0.15rem 0.5rem; font-size: 0.6rem; font-family: var(--font-body);
  color: #777; cursor: pointer; transition: all 0.2s; letter-spacing: 0.03em;
}
.legend-check-all:hover { border-color: var(--gold); color: var(--gold); }

/* ── Body Graph SVG Animations (toggle via .bg-animated class on svg) ── */
/* All channel paths use pathLength="1" so dash speed is uniform regardless of actual length */

/* Channels - pointillés animés (effet flux) : dashes bien visibles qui défilent */
.bg-animated [data-layer="channels"] {
  stroke-dasharray: 0.04 0.03;
  animation: bg-energy-flow 4s linear infinite;
}
.bg-animated [data-layer="channels"].bg-ch-rev {
  animation: bg-energy-rev 4s linear infinite;
}
/* Channels - golden (both P+D): mêmes pointillés, légèrement plus rapide */
.bg-animated .bg-channel-both {
  stroke-dasharray: 0.04 0.03;
  animation: bg-golden-channel 3.2s linear infinite;
}
.bg-animated .bg-channel-both.bg-ch-rev {
  animation: bg-golden-rev 3.2s linear infinite;
}

/* Dormant gates - slow breathing */
.bg-animated [data-layer="dormant"] {
  animation: bg-dormant-breathe 4s ease-in-out infinite;
}

/* Centers - respiration très discrète (fini le clignotement) */
.bg-animated .bg-center-defined {
  animation: bg-center-pulse 4.5s ease-in-out infinite;
}
.bg-animated .bg-center-golden {
  animation: bg-center-super 4s ease-in-out infinite;
}

/* Gates - aucune animation */

/* ── Keyframes ── */
@keyframes bg-energy-flow { to { stroke-dashoffset: -1; } }
@keyframes bg-energy-rev  { to { stroke-dashoffset: 1; } }
@keyframes bg-golden-channel { to { stroke-dashoffset: -1; } }
@keyframes bg-golden-rev     { to { stroke-dashoffset: 1; } }
@keyframes bg-dormant-breathe { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }
/* Pulse très subtil - fill-opacity (SVG) au lieu de opacity (CSS) :
   évite la création d'un layer GPU qui ferait remonter le centre par-dessus
   les éléments dessinés après lui (canaux, portes). */
@keyframes bg-center-pulse { 0%,100% { fill-opacity: 0.88; } 50% { fill-opacity: 1; } }
@keyframes bg-center-super {
  0%,100% { fill-opacity: 0.82; }
  50%     { fill-opacity: 1; }
}

/* animate button active state */
.bodygraph-action-btn.bg-anim-active { background: var(--gold) !important; color: #fff !important; border-color: var(--gold) !important; }

/* ── Activations layer toggle - hides side columns, BG fills space ── */
.bodygraph-wrapper.hide-activations .bodygraph-container svg [data-layer="activations"] { display: none !important; }

/* ── Tabs ── */
.tabs { margin-bottom: 0; }
.tabs-nav-wrap { position: relative; }
.tabs-nav {
  display: flex; flex-wrap: nowrap; gap: 0.25rem;
  background: var(--bg-card); border: 1px solid var(--border); border-bottom: 2px solid var(--border);
  border-radius: 12px 12px 0 0; padding: 0 0.5rem;
  margin-bottom: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  position: relative;
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0.85rem 1.25rem; margin-bottom: -2px;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.05em; color: var(--text-primary);
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap; flex-shrink: 0;
  border-radius: 9px 9px 0 0;
}
.tab-btn:hover { color: #fff; background: rgba(201,168,76,0.06); }
.tab-btn.active {
  color: var(--gold);
  font-weight: 600;
  background: linear-gradient(180deg, rgba(201,168,76,0.22) 0%, rgba(201,168,76,0.08) 60%, rgba(201,168,76,0.02) 100%);
  border: 1px solid rgba(201,168,76,0.32);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 -2px 12px rgba(201,168,76,0.18) inset, 0 -1px 0 rgba(201,168,76,0.4) inset;
  text-shadow: 0 0 8px rgba(201,168,76,0.35);
}
.tab-btn.active::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}
/* Chevrons de scroll (droite + gauche) - visible dès que la barre d'onglets
 * dépasse. Cliquable pour scroller, animation bounce pour signaler
 * l'interactivité. Masqué via `.hidden` par JS selon scrollLeft / scrollWidth. */
.tabs-nav-hint {
  position: absolute;
  top: 0; bottom: 2px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, transparent, var(--bg-card) 60%);
  border: 0;
  padding: 0;
  color: var(--gold);
  cursor: pointer;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.25s;
}
.tabs-nav-hint--left {
  left: 0;
  background: linear-gradient(to left, transparent, var(--bg-card) 60%);
  border-radius: 12px 0 0 0;
}
.tabs-nav-hint--right {
  right: 0;
  border-radius: 0 12px 0 0;
}
.tabs-nav-hint.hidden { opacity: 0; pointer-events: none; }
.tabs-nav-hint svg {
  opacity: 0.75;
  animation: hintBounce 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.4));
}
.tabs-nav-hint:hover svg { opacity: 1; animation: none; transform: scale(1.2); }
.tabs-nav-hint--left svg { animation-name: hintBounceLeft; }
@keyframes hintBounce { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes hintBounceLeft { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
body.light-mode .tabs-nav-hint { background: linear-gradient(to right, transparent, var(--bg-card) 60%); }
body.light-mode .tabs-nav-hint--left { background: linear-gradient(to left, transparent, var(--bg-card) 60%); }

.tab-content { display: none; padding: 2rem 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; animation: fadeUp 0.3s ease-out; }
.tab-content.active { display: block; }

/* ── Explain Blocks ── */
.explain-block {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem 1.75rem; margin-bottom: 1rem;
}
.explain-block h4 {
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 400;
  color: var(--gold); margin-bottom: 0.75rem;
}
.explain-block p {
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.75rem;
}
.explain-block p:last-child { margin-bottom: 0; }
.explain-block strong { color: var(--text-primary); }
.explain-block ul { margin: 0.75rem 0; padding-left: 1.25rem; }
.explain-block li { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.4rem; }
.explain-block li strong { color: var(--text-primary); }
.explain-block h4 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.explain-block h5 { font-size: 0.9rem; margin-bottom: 0.4rem; }

/* ── Accordion ── */
.accordion { margin-bottom: 0.5rem; }
.accordion-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem 1.25rem; cursor: pointer; transition: all var(--transition);
  width: 100;
}
.accordion-header:hover { border-color: var(--gold); }
.accordion-header .acc-title { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); }
.accordion-header .acc-badge { font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 4px; background: rgba(201,168,76,0.15); color: var(--gold); }
.accordion-header .acc-arrow { color: var(--text-muted); transition: transform var(--transition); font-size: 0.7rem; }
.accordion-header.open .acc-arrow { transform: rotate(180deg); }
.accordion-body {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
  background: var(--bg-card); border-radius: 0 0 8px 8px;
}
.accordion-body.open { max-height: 800px; overflow: visible; }
.accordion-body-inner { padding: 1.25rem; font-size: 0.88rem; color: var(--text-primary); line-height: 1.6; }

/* ── Info Card (inside tabs) ── */
.info-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
.info-card__label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; }
.info-card__value { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400; color: var(--gold); line-height: 1.5; }
.info-card__desc { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.5rem; line-height: 1.7; }

/* ── Activations ── */
.activations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
.activation-col h4 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 500; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); }
.activation-col--personality h4 { color: var(--text-primary); border-color: rgba(255,255,255,0.15); }
.activation-col--design h4 { color: var(--red-hd-light); border-color: rgba(208,64,80,0.25); }

/* ── Channels List ── */
.channels-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.channel-tag { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.18); border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.85rem; color: var(--gold-light); line-height: 1.4; }
.dormant-tag { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; margin-bottom: 0.15rem; }
.gate-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(201,168,76,0.4); transition: border-color 0.2s; }
.gate-link:hover { border-bottom-color: var(--gold); color: var(--gold-light); }

/* ── Tooltips ── */
.hd-tip {
  position: relative; display: inline-flex; align-items: center; gap: 0.2rem;
  cursor: help; border-bottom: 1px dotted var(--gold); color: inherit;
}
.hd-tip__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(201,168,76,0.15); color: var(--gold);
  font-size: 0.6rem; font-weight: 700; line-height: 1; flex-shrink: 0;
  transition: all var(--transition);
}
.hd-tip:hover .hd-tip__icon { background: var(--gold); color: var(--bg-primary); }

.hd-tip__popup {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); width: 300px; max-width: 90vw;
  background: #1e1e32; border: 1px solid var(--gold); border-radius: 10px;
  padding: 0.85rem 1rem; z-index: var(--z-loader);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  animation: tipFadeIn 0.2s ease-out;
}
.hd-tip__popup::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--gold);
}
.hd-tip.active .hd-tip__popup { display: block; }

@keyframes tipFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.hd-tip__popup-header {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem;
}
.hd-tip__popup-emoji { display: none; }
.hd-tip__popup-title { font-size: 0.78rem; font-weight: 700; color: var(--gold); text-transform: none; letter-spacing: 0; }
.hd-tip__popup-text { font-size: 0.7rem; line-height: 1.4; color: #ffffff; text-transform: none; }
/* CTA "Voir la fiche" ajouté dynamiquement sur mobile quand le tip est dans un <a> */
.hd-tip__popup-cta {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.55rem 0.95rem;
  background: var(--gold);
  color: var(--bg-primary);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: filter 0.15s;
}
.hd-tip__popup-cta:hover,
.hd-tip__popup-cta:active { filter: brightness(1.12); color: var(--bg-primary); }
body.light-mode .hd-tip__popup-cta { background: #8b6914; color: #fff; }

/* Desktop: tooltips inside the summary banner appear BELOW the banner
   (above would be off-screen / hidden by the banner itself) */
.summary-banner .hd-tip__popup {
  bottom: auto; top: calc(100% + 10px);
  animation: tipFadeInBelow 0.2s ease-out;
}
.summary-banner .hd-tip__popup::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--gold);
}
@keyframes tipFadeInBelow { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.summary-banner .hd-tip--left .hd-tip__popup,
.summary-banner .hd-tip--right .hd-tip__popup { animation: tipFadeInBelowSide 0.2s ease-out; }
@keyframes tipFadeInBelowSide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.summary-banner .hd-tip { border-bottom: none; }

/* Mobile: tooltips as a centered modal (not bottom sheet) */
@media (max-width: 768px) {
  /* Icône ? plus grande + zone tactile 44px étendue via ::after pour éviter
     de cliquer sur le mauvais tooltip quand ils sont serrés. */
  .hd-tip { position: relative; gap: 0.35rem; padding: 0.15rem 0; }
  .hd-tip__icon {
    position: relative;
    width: 22px; height: 22px;
    font-size: 0.78rem;
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.35);
  }
  /* Hit area invisible ~44×44 centrée sur l'icône (WCAG 2.2 AAA) */
  .hd-tip__icon::after {
    content: '';
    position: absolute; inset: -11px;
    border-radius: 50%;
  }
  /* Feedback visuel au tap */
  .hd-tip.active .hd-tip__icon {
    background: var(--gold);
    color: var(--bg-primary);
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.25);
  }

  .hd-tip__popup {
    position: fixed !important;
    top: 50% !important; left: 50% !important; bottom: auto !important; right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 2rem) !important; max-width: 360px !important;
    border-radius: 14px; padding: 1.1rem 1.25rem 1.25rem;
    animation: tipFadeInCenter 0.22s ease-out;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    z-index: 10000;
  }
  .hd-tip__popup::after { display: none; }
  .hd-tip__popup-title { font-size: 0.9rem; }
  .hd-tip__popup-text { font-size: 0.82rem; line-height: 1.55; }

  /* Espace les valeurs du summary-banner pour éviter les ? collés */
  .summary-banner .summary-item { padding: 0.4rem 0.65rem; }
  .summary-banner .summary-value { line-height: 1.45; }
  /* Barre de langue : un tap sur la valeur ouvre aussi le tooltip (pas seulement l'icône) */
  .summary-banner .hd-tip { cursor: pointer; }
  @keyframes tipFadeInCenter {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  /* Full-screen backdrop when any tip is active */
  body:has(.hd-tip.active)::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(5,12,28,0.65);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    z-index: var(--z-loader);
    animation: tipBackdropIn 0.2s ease-out;
  }
  @keyframes tipBackdropIn { from { opacity: 0; } to { opacity: 1; } }
  /* Reset side-variants on mobile (they shouldn't shift the modal) */
  .hd-tip--left .hd-tip__popup,
  .hd-tip--right .hd-tip__popup {
    left: 50% !important; right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Position adjustments for tooltips near edges */
.hd-tip--left .hd-tip__popup { left: 0; transform: none; }
.hd-tip--left .hd-tip__popup::after { left: 15px; transform: none; }
.hd-tip--right .hd-tip__popup { left: auto; right: 0; transform: none; }
.hd-tip--right .hd-tip__popup::after { left: auto; right: 15px; transform: none; }

/* White bg context (inside body graph legend) - popup is teleported to body,
   so the .hd-tip__popup--on-light class is added in JS to keep theming */
.bodygraph-legend .hd-tip__icon { background: rgba(139,105,20,0.15); color: #8b6914; }
.bodygraph-legend .hd-tip:hover .hd-tip__icon { background: #8b6914; color: #fff; }
.bodygraph-legend .hd-tip { border-bottom-color: #ccc; }
.hd-tip__popup--on-light { background: #fff !important; border-color: #ccc !important; color: #333 !important; }
.hd-tip__popup--on-light::after { border-top-color: #ccc; }
.hd-tip__popup--on-light .hd-tip__popup-text { color: #555 !important; }
.hd-tip__popup--on-light .hd-tip__popup-title { color: #8b6914 !important; }

/* ── Birth Bar ── */
.birth-bar {
  display: none; position: sticky; top: 0; z-index: var(--z-nav);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
  padding: 0.75rem max(1.5rem, var(--sar)) 0.75rem max(1.5rem, var(--sal));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(135deg, rgba(26,26,46,0.97), rgba(18,18,30,0.97));
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.birth-bar.visible { display: block; animation: fadeUp 0.4s ease-out; }
.birth-bar__inner {
  max-width: 1200px; margin: 0 auto; padding: 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 1rem;
}
.birth-bar__info {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap;
  min-width: 0; flex: 1 1 auto;
  overflow: hidden;
}
.birth-bar__info > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.birth-bar__actions { flex: 0 0 auto; }
.birth-bar__name {
  font-family: var(--font-heading); font-size: 1.3rem; color: var(--gold); font-weight: 600;
  letter-spacing: 0.03em;
}
.birth-bar__name:empty { display: none; }
.birth-bar__name:empty + .birth-bar__sep { display: none; }
.birth-bar__sep { color: var(--text-muted); font-size: 0.9rem; opacity: 0.4; }
.birth-bar__date {
  font-family: var(--font-body); font-size: 0.88rem; color: var(--text-secondary); font-weight: 400;
}
.birth-bar__city {
  font-family: var(--font-body); font-size: 0.88rem; color: var(--text-muted); font-weight: 400;
}
.birth-bar__edit, .birth-bar__btn {
  background: none; border: 1px solid var(--gold); border-radius: 8px;
  padding: 0.45rem 1rem; color: var(--gold);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
  letter-spacing: 0.03em; text-decoration: none; white-space: nowrap;
  width: fit-content;
}
.birth-bar__edit:hover, .birth-bar__btn:hover { background: var(--gold); color: var(--bg-primary); }
.birth-bar__save.saved { background: rgba(231,76,94,0.15); border-color: #e74c5e; color: #e74c5e; }
.birth-bar__save.saved .save-bar__heart { color: #e74c5e; }
.birth-bar__save.saved:hover { background: rgba(231,76,94,0.3); }
.save-bar__heart { font-size: 1rem; line-height: 1; }
.birth-bar__actions { display: flex; gap: 0.75rem; align-items: center; }
.birth-bar__icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  font-size: 1rem; line-height: 1;
}
.birth-bar__icon-btn svg { flex-shrink: 0; }
.birth-bar__sticky-only { display: none; }
.birth-bar.is-stuck .birth-bar__sticky-only { display: flex; }
.birth-bar__reset {
  background: none; border: 1px solid var(--gold); border-radius: 8px;
  padding: 0.45rem 1rem; color: var(--gold);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
  letter-spacing: 0.03em; width: fit-content;
}
.birth-bar__reset:hover { background: var(--gold); color: var(--bg-primary); }

.birth-bar__toggle-tips {
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(201,168,76,0.15); border: 1px solid var(--gold);
  border-radius: 8px; padding: 0.45rem 1rem;
  cursor: pointer; transition: all var(--transition);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--gold);
}
.birth-bar__toggle-tips:hover { background: rgba(201,168,76,0.25); }
.toggle-tips__label { display: none; }
.birth-bar__toggle-tips.off { background: none; border-color: var(--border); color: var(--text-muted); }
.toggle-tips__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: var(--bg-primary);
  font-size: 0.7rem; font-weight: 700;
}
.birth-bar__toggle-tips.off .toggle-tips__icon { background: var(--text-muted); }

body.tips-off .hd-tip { border-bottom: none; cursor: default; }
body.tips-off .hd-tip__icon { display: none; }
body.tips-off .hd-tip__popup { display: none !important; }

/* Un tooltip imbriqué dans un <a>.summary-link : retire le double
   soulignement (le lien a déjà son propre style) et hérite du curseur. */
.summary-link .hd-tip { border-bottom: none; cursor: inherit; color: inherit; }
.summary-link .hd-tip__icon { margin-left: 0.2rem; }

/* Hide hero & form when results are shown */
body.has-results .hero,
body.has-results .form-section { display: none; }

/* Show results section immediately with loader when chart params in URL */
body.has-results .results-section { display: block; }
/* Show birth bar and summary banner as empty placeholders while loading */
body.has-results .birth-bar { display: block; }
body.has-results .summary-banner { display: flex; }

/* Hide loader once SVG is rendered (JS replaces loader content) */
.bodygraph-container:not(:empty) > .hd-loader { display: none; }
/* But show loader when it's the only child */
.bodygraph-container > .hd-loader:only-child { display: flex; }

/* Hide content sections while loading (no data yet), show skeleton structure */
body.has-results .results-section:not(.visible) .share-bar,
body.has-results .results-section:not(.visible) .tabs,
body.has-results .results-section:not(.visible) .chart-recap { display: none; }

/* Fade in content sections once loaded */
body.has-results .results-section.visible .summary-banner,
body.has-results .results-section.visible .share-bar,
body.has-results .results-section.visible .tabs { animation: fadeUp 0.4s ease-out; }

/* Hide legend and action buttons while loader is showing */
body.has-results .results-section:not(.visible) .bodygraph-legend,
body.has-results .results-section:not(.visible) .bodygraph-actions { display: none; }

/* ── FAQ Page ── */
.faq-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.faq-header { text-align: center; padding: 3rem 1rem 2rem; }
.faq-title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 300; color: var(--gold); letter-spacing: 0.06em; margin: 0 0 0.5rem; }
.faq-subtitle { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 550px; margin: 0 auto; }
.faq-layout { display: flex; gap: 2.5rem; align-items: flex-start; }
.faq-nav {
  position: sticky; top: 5rem; flex-shrink: 0; width: 200px;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.faq-nav__link {
  display: block; padding: 0.5rem 0.75rem; border-radius: 8px;
  font-size: 0.8rem; font-weight: 500; text-decoration: none;
  color: var(--text-muted); transition: all 0.2s;
  border-left: 2px solid transparent;
}
.faq-nav__link:hover { color: var(--text-primary); background: rgba(201,168,76,0.05); }
.faq-nav__link.active { color: var(--gold); border-left-color: var(--gold); background: rgba(201,168,76,0.08); }
.faq-main { flex: 1; min-width: 0; }
.faq-section { margin-bottom: 2.5rem; }
.faq-section__title {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400;
  color: var(--gold); margin: 0 0 1rem; padding-bottom: 0; letter-spacing: 0.03em;
}
.faq-title::after { width: 100%; max-width: 200px; margin: 0.5rem auto 0; }
.faq-section__title::after { width: 100%; margin-top: 0.5rem; }
.contact-title::after { width: 100%; max-width: 200px; margin: 0.5rem auto 0; }
.faq-item {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 0.5rem; overflow: hidden; transition: border-color 0.2s;
}
.faq-item:hover { border-color: rgba(201,168,76,0.3); }
.faq-item__q {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.9rem 1.25rem; gap: 1rem;
  background: none; border: none; text-align: left;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
  color: var(--text-primary); cursor: pointer; transition: color 0.2s;
}
.faq-item__q::after {
  content: '+'; flex-shrink: 0; font-size: 1.2rem; font-weight: 300;
  color: var(--gold); transition: transform 0.3s;
}
.faq-item.open .faq-item__q::after { content: '\2212'; }
.faq-item__q:hover { color: var(--gold); }
.faq-item__a {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;
  padding: 0 1.25rem;
}
.faq-item.open .faq-item__a { max-height: 800px; padding: 0 1.25rem 1.25rem; }
.faq-item__a p { font-size: 0.85rem; line-height: 1.7; color: var(--text-secondary); margin: 0 0 0.6rem; }
.faq-item__a ul, .faq-item__a ol { padding-left: 1.2rem; margin: 0.4rem 0 0.6rem; }
.faq-item__a li { font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 0.3rem; }
.faq-item__a a { color: var(--gold); text-decoration: none; }
.faq-item__a a:hover { text-decoration: underline; }
.faq-item__a code { background: rgba(201,168,76,0.1); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.8rem; }
.faq-cta {
  text-align: center; padding: 2rem 1rem; margin-top: 1rem;
  border-top: 1px solid var(--border);
}
.faq-cta p { color: var(--text-muted); font-size: 0.9rem; }
.faq-cta a { color: var(--gold); text-decoration: none; font-weight: 600; }
.faq-cta a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .faq-nav { display: none; }
  .faq-layout { flex-direction: column; }
  .faq-header { padding: 2rem 0.5rem 1.5rem; }
  .faq-title { font-size: 1.6rem; }
}

/* ── Limit Modal ── */
.limit-modal {
  display: none; position: fixed; inset: 0; z-index: var(--z-modal);
  align-items: center; justify-content: center;
}
.limit-modal.open { display: flex; }
.limit-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.limit-modal__content {
  position: relative; z-index: 1; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.5rem 2rem; max-width: 440px; width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.limit-modal__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.limit-modal__close:hover { border-color: var(--gold); color: var(--gold); }
.limit-modal__icon { color: var(--gold); margin-bottom: 1rem; }
.limit-modal__title {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400;
  color: var(--gold); margin: 0 0 0.75rem; letter-spacing: 0.03em;
}
.limit-modal__text {
  font-size: 0.88rem; line-height: 1.7; color: var(--text-secondary);
  margin: 0 0 0.5rem;
}
.limit-modal__text strong { color: var(--text-primary); }
.limit-modal__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }
.limit-modal__btn {
  display: block; padding: 0.7rem 1.5rem; border-radius: 10px;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: all 0.2s; letter-spacing: 0.03em;
}
.limit-modal__btn--primary {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--bg-primary); border: none;
}
.limit-modal__btn--primary:hover { filter: brightness(1.1); }
.limit-modal__btn--outline {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
}
.limit-modal__btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Contact birth data block ── */
.contact-birth-block {
  border: 1px solid rgba(201,168,76,0.2); border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem; margin: 0.5rem 0 0.75rem;
  background: rgba(201,168,76,0.03);
}
.contact-birth-block__title {
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500;
  color: var(--gold); padding: 0 0.3rem; letter-spacing: 0.03em;
}
.contact-birth-block__desc {
  font-size: 0.78rem; line-height: 1.6; color: var(--text-muted);
  margin: 0.4rem 0 0.8rem; padding: 0;
}
.contact-birth-block__desc strong { color: var(--gold); font-weight: 600; }
body.light-mode .contact-birth-block {
  border-color: rgba(139,105,20,0.15); background: rgba(139,105,20,0.03);
}

/* ── Contact Page ── */
.contact-wrapper {
  max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 4rem;
  position: relative; min-height: 60vh;
}
.contact-header {
  text-align: center; padding: 2rem 0 2.5rem;
}
.contact-title {
  font-family: var(--font-heading); font-size: 2.4rem; font-weight: 300;
  color: var(--gold); letter-spacing: 0.05em;
}
.contact-subtitle {
  font-size: 0.95rem; color: var(--text-secondary); margin-top: 0.5rem;
  max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.6;
}
.contact-layout {
  display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem;
  align-items: start;
}
.contact-form-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.5rem; box-shadow: var(--glow);
}
.contact-form .form-row { margin-bottom: 1.25rem; }
.contact-form .form-group label .required { color: var(--red-hd); }
.contact-form textarea {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.85rem 1rem; color: var(--text-primary); font-family: var(--font-body);
  font-size: 0.95rem; outline: none; width: 100%; resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 120px;
}
.contact-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); }
.contact-form textarea::placeholder { color: var(--text-muted); }
.contact-form textarea.field-error {
  border-color: var(--red-hd) !important;
  box-shadow: 0 0 0 3px rgba(231,76,94,0.15) !important;
  animation: fieldShake 0.4s ease-out;
}
.contact-submit {
  width: 100%; padding: 0.9rem 2rem; margin-top: 0.5rem;
  background: var(--gold); color: var(--bg-primary); border: none; border-radius: 10px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  letter-spacing: 0.05em; cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}
.contact-submit:hover { opacity: 0.85; transform: translateY(-1px); }
.contact-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.contact-success, .contact-error {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;
  line-height: 1.5;
}
.contact-success {
  background: rgba(102,187,106,0.1); border: 1px solid rgba(102,187,106,0.3);
  color: #66BB6A;
}
.contact-success strong { color: #81C784; }
.contact-success p { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.2rem; }
.contact-error {
  background: rgba(231,76,94,0.1); border: 1px solid rgba(231,76,94,0.3);
  color: var(--red-hd);
}
.contact-error strong { color: var(--red-hd-light); }
.contact-error p { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.2rem; }
/* Decorative visuals */
.contact-visual {
  position: absolute; pointer-events: none; opacity: 0.15;
  animation: mandalaSpin 20s linear infinite;
}
.contact-visual--left { top: 60px; left: -60px; }
.contact-visual--right { top: 200px; right: -40px; }
@keyframes mandalaSpin { to { transform: rotate(360deg); } }
/* Contact sidebar */
.contact-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

/* Premium widget */
.contact-premium-widget {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #1a1530 0%, #12102a 50%, #1e1a30 100%);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 1.75rem 1.5rem;
  text-align: center;
}
.cpw-glow {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.cpw-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(201,168,76,0.1); color: var(--gold);
  margin-bottom: 0.75rem;
}
.cpw-title {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 400;
  color: var(--gold); margin: 0 0 0.6rem; letter-spacing: 0.04em;
}
.cpw-text {
  font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55;
  margin: 0 0 1rem;
}
.cpw-features {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: flex; flex-direction: column; gap: 0.4rem; text-align: left;
}
.cpw-features li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--text-secondary);
}
.cpw-features li svg { color: var(--gold); flex-shrink: 0; }
.cpw-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #050c1c; border-radius: 8px; padding: 0.6rem 1.4rem;
  font-size: 0.82rem; font-weight: 600; text-decoration: none;
  transition: box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 4px 15px rgba(201,168,76,0.2);
}
.cpw-btn:hover { box-shadow: 0 6px 25px rgba(201,168,76,0.35); transform: translateY(-1px); }
.cpw-price {
  display: block; margin-top: 0.6rem;
  font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.03em;
}
body.light-mode .contact-premium-widget {
  background: linear-gradient(145deg, #fdfbf6 0%, #f9f5ec 100%);
  border-color: rgba(139,105,20,0.2);
}
body.light-mode .cpw-glow { background: radial-gradient(circle, rgba(139,105,20,0.08) 0%, transparent 70%); }
body.light-mode .cpw-icon { background: rgba(139,105,20,0.08); color: #8b6914; }
body.light-mode .cpw-title { color: #8b6914; }
body.light-mode .cpw-text { color: #666; }
body.light-mode .cpw-features li { color: #555; }
body.light-mode .cpw-features li svg { color: #8b6914; }

.contact-info-card {
  background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02));
  border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem;
}
.contact-info-card__title {
  font-family: var(--font-heading); font-size: 1.1rem; color: var(--gold);
  margin-bottom: 0.5rem;
}
.contact-info-card__text { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.75rem; }
.contact-info-card__links { list-style: none; }
.contact-info-card__links li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; margin-bottom: 0.4rem; color: var(--text-muted);
}
.contact-info-card__links a { color: var(--gold); text-decoration: none; }
.contact-info-card__links a:hover { text-decoration: underline; }
.contact-info-card__links svg { flex-shrink: 0; stroke: var(--gold); opacity: 0.6; }
/* Light mode overrides */
body.light-mode .contact-visual { opacity: 0.08; }
body.light-mode .contact-success { background: rgba(102,187,106,0.08); }
body.light-mode .contact-error { background: rgba(231,76,94,0.08); }
/* Responsive */
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-sidebar { order: 2; }
  .contact-visual { display: none; }
  .contact-wrapper { padding: 1.5rem 1rem 3rem; }
  .contact-form-card { padding: 1.5rem; }
  .contact-title { font-size: 1.8rem; }
}

/* ══════════════════════════════════════════════════════════════
   CTA Banner contextuel - upgrade tier (mobile-first)
   ───────────────────────────────────────────────────────────────
   3 variantes : signup (visiteur) / premium / pro. Palette or +
   bleu nuit alignée sur la charte du site.
   ══════════════════════════════════════════════════════════════ */
.cta-banner {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  color: #f5f2ea;
  background:
    radial-gradient(ellipse 80% 100% at 10% 0%, rgba(201,168,76,0.22), transparent 65%),
    linear-gradient(135deg, #162340 0%, #0b1428 60%, #050c1c 100%);
  border: 1px solid rgba(201,168,76,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 40px rgba(0,0,0,0.35),
    0 0 0 1px rgba(201,168,76,0.1);
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0 0 auto 0;
  height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.2) 20%, var(--gold, #c9a84c) 50%, rgba(201,168,76,0.2) 80%, transparent 100%);
}
.cta-banner__mandala {
  position: absolute;
  bottom: -80px; right: -80px;
  width: 220px; height: 220px;
  pointer-events: none;
  color: rgba(201,168,76,0.3);
  animation: ctaMandalaRotate 30s linear infinite;
}
@keyframes ctaMandalaRotate { to { transform: rotate(360deg); } }

.cta-banner__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 1.1rem;
}

.cta-banner__text { min-width: 0; }

.cta-banner__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light, #e8d48b);
}

.cta-banner__title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 0.6rem;
  color: #fff;
  letter-spacing: 0.01em;
}
/* Neutralise le trait décoratif hérité qui ne colle plus au design doré */
.cta-banner__title::after { display: none; }

.cta-banner__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(245,242,234,0.78);
}

.cta-banner__bullets {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cta-banner__bullets li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: rgba(245,242,234,0.86);
  line-height: 1.4;
}
.cta-banner__bullets li span {
  color: var(--gold-light, #e8d48b);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-shrink: 0;
}

.cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-body, inherit);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #0a1120;
  background: linear-gradient(135deg, #e8d48b 0%, var(--gold, #c9a84c) 100%);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 6px 20px rgba(201,168,76,0.35);
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.cta-banner__btn:hover,
.cta-banner__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 10px 28px rgba(201,168,76,0.5);
  outline: none;
}

.cta-banner__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(245,242,234,0.72);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.18s, background 0.18s;
}
.cta-banner__link:hover,
.cta-banner__link:focus-visible {
  color: var(--gold-light, #e8d48b);
  background: rgba(201,168,76,0.08);
  outline: none;
}

/* ───── Variante Pro : halo un peu plus marqué ───── */
.cta-banner--pro {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 14px 44px rgba(0,0,0,0.4),
    0 0 0 1px rgba(201,168,76,0.18),
    0 0 36px rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.55);
}

/* ═══════════════════════════════════════════════════════════════════
 * Typeahead encyclopédie - P2 #11 audit Grabz.it
 * ═══════════════════════════════════════════════════════════════════ */
.hd-search-overlay__inputwrap { position: relative; }
.hd-search-typeahead {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  list-style: none;
  margin: 0; padding: 0.4rem 0;
  background: var(--bg-card, #0d1830);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.2);
  max-height: 420px;
  overflow-y: auto;
  z-index: var(--z-toast);
}
.hd-search-typeahead__item {
  margin: 0;
  padding: 0;
  border-radius: 8px;
}
.hd-search-typeahead__link {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: background 0.1s ease;
}
.hd-search-typeahead__item.is-active .hd-search-typeahead__link,
.hd-search-typeahead__link:hover,
.hd-search-typeahead__link:focus {
  background: rgba(201,168,76,0.08);
  outline: none;
}
.hd-search-typeahead__cat {
  flex: 0 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 999px;
  background: rgba(201,168,76,0.06);
}
.hd-search-typeahead__title {
  flex: 1 1 auto;
  font-weight: 500;
  color: var(--text-primary);
}
body.light-mode .hd-search-typeahead {
  background: #fff;
  border-color: rgba(139,105,20,0.22);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
}
body.light-mode .hd-search-typeahead__item.is-active .hd-search-typeahead__link,
body.light-mode .hd-search-typeahead__link:hover,
body.light-mode .hd-search-typeahead__link:focus {
  background: rgba(139,105,20,0.07);
}
body.light-mode .hd-search-typeahead__cat {
  color: #8b6914;
  border-color: rgba(139,105,20,0.3);
  background: rgba(139,105,20,0.05);
}

/* ═══════════════════════════════════════════════════════════════════
 * Témoignages pricing (/offres/) - P2 #15 audit Grabz.it
 * ═══════════════════════════════════════════════════════════════════ */
.pricing-testimonials {
  padding: 3rem 1.5rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.pricing-testimonials__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 300;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 2.5rem;
  letter-spacing: 0.02em;
}
.pricing-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.pricing-testimonial {
  padding: 1.75rem 1.5rem;
  background: linear-gradient(180deg, rgba(16,30,60,0.7), rgba(13,24,48,0.9));
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.25);
}
.pricing-testimonial__stars {
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
}
.pricing-testimonial__text {
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-primary);
  font-style: italic;
  border: none;
}
.pricing-testimonial__text::before { content: '« '; opacity: 0.6; }
.pricing-testimonial__text::after  { content: ' »'; opacity: 0.6; }
.pricing-testimonial__author {
  font-size: 0.82rem;
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}
.pricing-testimonial__meta {
  font-size: 0.76rem;
  color: var(--text-secondary);
  opacity: 0.8;
}
body.light-mode .pricing-testimonial {
  background: linear-gradient(180deg, #fff, #faf9f5);
  border-color: rgba(139,105,20,0.22);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
body.light-mode .pricing-testimonial__stars {
  color: #c9a84c;
}

/* ───── Variante welcome post-checkout (7 jours) ───── */
.cta-banner--welcome {
  background:
    linear-gradient(135deg, rgba(129,199,132,0.12), rgba(201,168,76,0.1)),
    linear-gradient(180deg, rgba(16,30,60,0.92), rgba(13,24,48,0.96));
  border-color: rgba(174,213,129,0.4);
  box-shadow:
    inset 0 1px 0 rgba(174,213,129,0.14),
    0 14px 40px rgba(0,0,0,0.35),
    0 0 36px rgba(174,213,129,0.18);
}
.cta-banner--welcome .cta-banner__eyebrow {
  color: #aed581;
}
body.light-mode .cta-banner--welcome {
  background: linear-gradient(135deg, rgba(129,199,132,0.08), rgba(139,105,20,0.06)),
              linear-gradient(180deg, #fff, #faf9f5);
  border-color: rgba(100,160,80,0.4);
  box-shadow:
    inset 0 1px 0 rgba(174,213,129,0.1),
    0 10px 30px rgba(0,0,0,0.08),
    0 0 26px rgba(174,213,129,0.16);
}
body.light-mode .cta-banner--welcome .cta-banner__eyebrow {
  color: #5a8a3a;
}

/* ───── Desktop : layout en 2 colonnes ───── */
@media (min-width: 768px) {
  .cta-banner {
    padding: 2rem 2.25rem;
    margin: 2.5rem auto;
  }
  .cta-banner__content {
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
  }
  .cta-banner__text { flex: 1; }
  .cta-banner__title { font-size: 1.9rem; }
  .cta-banner__desc { max-width: 560px; }
  .cta-banner__actions { min-width: 220px; }
}

/* ───── Mode jour : ivoire uni, sobre, sans aucun dégradé ─────
   !important posé sur les backgrounds pour neutraliser les anciennes
   règles éparses (css/member.css, overrides légués) qui appliquaient
   un gradient or sur les mêmes sélecteurs. */
body.light-mode .cta-banner {
  color: #1d2742;
  background: #fdfaf2 !important;
  border-color: rgba(160,124,42,0.28);
  box-shadow:
    0 8px 26px rgba(17,24,44,0.08),
    0 0 0 1px rgba(160,124,42,0.08);
}
body.light-mode .cta-banner::before {
  background: var(--gold-dark, #a07c2a) !important;
  opacity: 0.6;
}
body.light-mode .cta-banner__mandala { color: rgba(160,124,42,0.18); }
body.light-mode .cta-banner__eyebrow { color: var(--gold-dark, #8b6914); }
body.light-mode .cta-banner__title { color: #1d2742; }
body.light-mode .cta-banner__desc { color: rgba(29,39,66,0.78); }
body.light-mode .cta-banner__bullets li { color: rgba(29,39,66,0.82); }
body.light-mode .cta-banner__bullets li span { color: var(--gold-dark, #8b6914); }
body.light-mode .cta-banner__btn {
  color: #fff;
  background: var(--gold-dark, #8b6914) !important;
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 4px 16px rgba(160,124,42,0.28);
}
body.light-mode .cta-banner__btn:hover,
body.light-mode .cta-banner__btn:focus-visible {
  background: #6b5010 !important;
  box-shadow: 0 8px 22px rgba(160,124,42,0.4);
}
body.light-mode .cta-banner__link { color: rgba(29,39,66,0.68); }
body.light-mode .cta-banner__link:hover,
body.light-mode .cta-banner__link:focus-visible {
  color: var(--gold-dark, #8b6914);
  background: rgba(139,105,20,0.06);
}
body.light-mode .cta-banner--pro {
  border-color: rgba(160,124,42,0.4);
  box-shadow:
    0 10px 30px rgba(17,24,44,0.1),
    0 0 0 1px rgba(160,124,42,0.14);
}

/* Page-specific hiding */
body.home:not(.has-results) .cta-banner { display: none; }
body.home .back-to-top { display: none; }
body.page-template-page-mon-compte .cta-banner { display: none; }

/* ── Toast notifications (replaces alert()) ── */
.hd-toast {
  position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); max-width: 90vw; width: auto;
  padding: 0.85rem 1.5rem; border-radius: 10px;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 500;
  display: flex; align-items: center; gap: 0.6rem;
  animation: toastIn 0.3s ease-out;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.hd-toast--error {
  background: #1e1020; border: 1px solid rgba(231,76,94,0.4);
  color: #ff8a95;
}
.hd-toast--error::before { content: '⚠'; font-size: 1.1rem; }
.hd-toast--success {
  background: #102018; border: 1px solid rgba(76,175,80,0.4);
  color: #81c784;
}
.hd-toast--success::before { content: '✓'; font-size: 1.1rem; }
.hd-toast--info {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary);
}
.hd-toast--info::before { content: 'ℹ'; font-size: 1.1rem; color: var(--gold); }
body.light-mode .hd-toast--error { background: #fff0f0; border-color: rgba(192,53,74,0.3); color: #c0354a; }
body.light-mode .hd-toast--success { background: #f0fff0; border-color: rgba(76,175,80,0.3); color: #2e7d32; }
body.light-mode .hd-toast--info { background: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ── Footer ── */
.site-footer {
  position: relative; z-index: 1;
  padding: 3rem max(2rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  margin-top: 4rem; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.8rem;
}
.site-footer a { color: var(--gold); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }
.footer-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 2rem;
  max-width: 1100px; margin: 0 auto 2rem; text-align: left;
}
.footer-col__title {
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600;
  color: var(--gold); margin: 0 0 0.75rem; letter-spacing: 0.03em;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a { color: rgba(240,238,235,0.7); font-size: 0.8rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--gold); }
.footer-col__title--sub { font-size: 0.8rem; margin-top: 1rem; color: rgba(201,168,76,0.7); }
.footer-links--compact li { margin-bottom: 0.2rem; }
.footer-links--compact a { font-size: 0.72rem; }
.footer-col__text { font-size: 0.78rem; line-height: 1.6; color: rgba(240,238,235,0.6); margin: 0 0 0.75rem; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(240,238,235,0.15); color: rgba(240,238,235,0.6);
  transition: all 0.2s;
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
/* ── Sidebar/Footer generator shared styles ── */
.sidebar-generator {
  background: linear-gradient(135deg, rgba(201,168,76,0.1), rgba(201,168,76,0.03));
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 12px; padding: 1.25rem;
}
.sidebar-generator__form { display: flex; flex-direction: column; gap: 0.5rem; }
.sg-row { display: flex; gap: 0.4rem; }
.sg-row--3 .sg-field, .sg-row--2 .sg-field { flex: 1; }
.sg-field label {
  display: block; font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.15rem;
}
.sg-field select,
.sg-field input[type="text"] {
  width: 100%; padding: 0.4rem 0.3rem; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: 0.8rem; font-family: var(--font-body); box-sizing: border-box;
}
.sg-field select:focus, .sg-field input[type="text"]:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,0.15);
}
.sg-field .field-error { border-color: var(--red-hd) !important; animation: fieldShake 0.4s ease; }
.sidebar-generator__btn {
  margin-top: 0.4rem; width: 100%; padding: 0.55rem 1rem;
  background: var(--gold); color: var(--bg-primary);
  border: none; border-radius: 6px; cursor: pointer;
  font-weight: 600; font-size: 0.8rem; font-family: var(--font-body);
  transition: opacity 0.2s;
}
.sidebar-generator__btn:hover { opacity: 0.85; }

/* Footer generator overrides - subtle, integrated */
.sidebar-generator--footer {
  background: none; border: none; border-radius: 0; padding: 0;
}
.sidebar-generator--footer .sidebar-generator__form { gap: 0.4rem; }
.sidebar-generator--footer .sg-field label { font-size: 0.6rem; color: rgba(240,238,235,0.7); margin-bottom: 0.1rem; }
.sidebar-generator--footer .sg-field input,
.sidebar-generator--footer .sg-field select {
  font-size: 0.75rem; padding: 0.35rem 0.4rem;
  background: var(--bg-secondary); border-color: var(--border);
  border-radius: 5px;
}
.sidebar-generator--footer .sidebar-generator__btn {
  font-size: 0.75rem; padding: 0.45rem; margin-top: 0.3rem;
  border-radius: 6px; letter-spacing: 0.03em;
}
/* Legacy footer form (unused) */
.footer-form__input {
  width: 100%; padding: 0.45rem 0.6rem; margin-bottom: 0.4rem;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); font-family: var(--font-body); font-size: 0.78rem;
}
.footer-form__input:focus { outline: none; border-color: var(--gold); }
.footer-form__input::placeholder { color: var(--text-muted); }
.footer-form__input--sm { width: auto; flex: 1; }
.footer-form__row { display: flex; gap: 0.3rem; }
.footer-form__btn {
  width: 100%; margin-top: 0.3rem; padding: 0.45rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border: none; border-radius: 6px; color: var(--bg-primary);
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.footer-form__btn:hover { filter: brightness(1.1); }
.footer-bottom { text-align: center; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.footer-bottom p { font-size: 0.78rem; color: rgba(240,238,235,0.45); margin-bottom: 0.5rem; }
.footer-legal-nav { display: flex; justify-content: center; gap: 1.5rem; margin-top: 0.5rem; }
.footer-legal-nav a { font-size: 0.72rem; color: rgba(240,238,235,0.35); text-decoration: none; transition: color 0.2s; }
.footer-legal-nav a:hover { color: var(--gold); }
body.light-mode .footer-bottom p { color: rgba(30,30,50,0.45); }
body.light-mode .footer-legal-nav a { color: rgba(30,30,50,0.35); }
body.light-mode .footer-legal-nav a:hover { color: #8b6914; }
body.light-mode .footer-col__text { color: rgba(30,30,50,0.55); }

/* ── Mentions légales ── */
.legal-wrapper { max-width: 780px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.legal-title {
  font-family: var(--font-heading); font-size: clamp(1.8rem,4vw,2.6rem);
  font-weight: 300; color: var(--gold); margin-bottom: 2.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.legal-content h2 {
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500;
  color: var(--gold); margin: 2rem 0 0.75rem; padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.legal-content h3 { font-size: 0.95rem; color: var(--text-secondary); margin: 1.25rem 0 0.4rem; font-weight: 600; }
.legal-content p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.75rem; }
.legal-content ul { padding-left: 1.25rem; margin-bottom: 0.75rem; }
.legal-content li { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.3rem; }
.legal-content a { color: var(--gold); text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }
.legal-content em { color: rgba(201,168,76,0.6); font-style: italic; }

/* ── Toast de bienvenue (première visite) ── */
.hd-welcome-toast {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: var(--z-modal-backdrop);
  width: 340px;
  max-width: calc(100vw - 2rem);
  padding: 1.2rem 1.35rem 1rem;
  background: var(--bg-card);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45),
              0 0 30px rgba(201, 168, 76, 0.08);
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.hd-welcome-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hd-welcome-toast__close {
  position: absolute;
  top: 0.5rem; right: 0.7rem;
  background: transparent; border: 0; padding: 0;
  width: 28px; height: 28px;
  font-size: 1.3rem; line-height: 1;
  color: var(--text-secondary); cursor: pointer;
  transition: color 0.2s;
}
.hd-welcome-toast__close:hover { color: var(--gold); }
.hd-welcome-toast__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: 0.6rem;
  background: radial-gradient(circle at 30% 30%, rgba(240, 216, 120, 0.28), rgba(201, 168, 76, 0.08) 70%);
  border-radius: 50%;
  color: var(--gold);
}
.hd-welcome-toast__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--gold);
  margin: 0 0 0.35rem;
  letter-spacing: 0.02em;
}
.hd-welcome-toast__text {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 0.9rem;
}
.hd-welcome-toast__actions {
  display: flex; align-items: center; gap: 0.75rem;
}
.hd-welcome-toast__cta {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #050c1c;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.25);
}
.hd-welcome-toast__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 168, 76, 0.35);
}
.hd-welcome-toast__link {
  color: var(--text-secondary);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color 0.2s;
}
.hd-welcome-toast__link:hover { color: var(--gold); }

body.light-mode .hd-welcome-toast {
  background: #fffdfa;
  border-color: rgba(139, 105, 20, 0.28);
}
body.light-mode .hd-welcome-toast__cta {
  background: linear-gradient(135deg, #b8882b 0%, #8b6914 100%);
  color: #fffdf5;
}

@media (max-width: 480px) {
  .hd-welcome-toast {
    bottom: 1rem; right: 1rem; left: 1rem;
    width: auto;
  }
}

/* ── Hero perks (3 mini-features sous le formulaire) ── */
.hero-perks {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 0 1rem;
}
.hero-perks__toggle {
  display: none;
  width: 100%;
  align-items: center; justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 10px;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hero-perks__toggle svg { transition: transform 0.3s ease; }
.hero-perks__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.hero-perks__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 12px;
  transition: border-color 0.3s, transform 0.3s;
}
.hero-perks__item:hover {
  border-color: rgba(201, 168, 76, 0.32);
  transform: translateY(-2px);
}
.hero-perks__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 10px;
  color: var(--gold);
}
.hero-perks__text { min-width: 0; flex: 1; }
.hero-perks__text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}
.hero-perks__text span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

body.light-mode .hero-perks__toggle {
  background: rgba(139, 105, 20, 0.05);
  border-color: rgba(139, 105, 20, 0.2);
  color: #8b6914;
}
body.light-mode .hero-perks__item { background: #fffdf9; border-color: rgba(139, 105, 20, 0.12); }
body.light-mode .hero-perks__icon {
  background: rgba(139, 105, 20, 0.08);
  border-color: rgba(139, 105, 20, 0.22);
  color: #8b6914;
}
body.light-mode .hero-perks__text strong { color: #8b6914; }

/* Mobile : accordéon replié par défaut */
@media (max-width: 768px) {
  .hero-perks { margin-top: 1.25rem; padding: 0 1rem; }
  .hero-perks__toggle { display: flex; }
  .hero-perks__list {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease, margin 0.25s ease;
    margin-top: 0;
  }
  .hero-perks--open .hero-perks__list {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.6rem;
  }
  .hero-perks--open .hero-perks__toggle svg { transform: rotate(180deg); }
  .hero-perks__item { padding: 0.85rem 1rem; }
  .hero-perks__icon { width: 36px; height: 36px; }
}

/* ── Compteur IA restant (en contexte onglet "Pour vous") ── */
.ai-quota-indicator {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  margin: 0 0 1rem;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-pill);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ai-quota-indicator svg { flex-shrink: 0; opacity: 0.9; }
.ai-quota-indicator__text { color: var(--text-secondary); }
.ai-quota-indicator__text strong {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 500;
  margin-right: 0.1rem;
}
body.light-mode .ai-quota-indicator {
  background: rgba(139, 105, 20, 0.06);
  border-color: rgba(139, 105, 20, 0.28);
  color: #8b6914;
}
body.light-mode .ai-quota-indicator__text strong { color: #8b6914; }

/* ── Gate modal (features Premium cliquées par Free) ── */
.gate-modal {
  position: fixed; inset: 0; z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease;
  pointer-events: none; /* n'intercepte pas les clics tant qu'inactif */
}
.gate-modal[hidden] { display: none !important; }
.gate-modal.is-open { opacity: 1; pointer-events: auto; }
.gate-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 12, 28, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gate-modal__content {
  position: relative; z-index: 1;
  max-width: 420px; width: 92%;
  padding: 2.25rem 2rem 1.75rem;
  background: var(--bg-card);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.gate-modal.is-open .gate-modal__content { transform: translateY(0) scale(1); }
.gate-modal__close {
  position: absolute; top: 0.75rem; right: 0.9rem;
  background: transparent; border: 0; padding: 0;
  width: 32px; height: 32px;
  font-size: 1.6rem; line-height: 1;
  color: var(--text-secondary); cursor: pointer;
  transition: color 0.2s;
}
.gate-modal__close:hover { color: var(--gold); }
.gate-modal__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(240, 216, 120, 0.25), rgba(201, 168, 76, 0.08) 70%);
  color: var(--gold);
  filter: drop-shadow(0 4px 16px rgba(201, 168, 76, 0.35));
}
.gate-modal__title {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 400;
  color: var(--gold); margin: 0 0 0.65rem;
  letter-spacing: 0.02em;
}
.gate-modal__text {
  color: var(--text-secondary);
  font-size: 0.92rem; line-height: 1.6;
  margin: 0 0 1.5rem;
}
.gate-modal__actions {
  display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch;
}
.gate-modal__cta {
  display: inline-block; padding: 0.85rem 1.25rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #050c1c; font-weight: 600; font-size: 0.88rem;
  letter-spacing: 0.03em;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.gate-modal__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201, 168, 76, 0.4); }
.gate-modal__link {
  background: transparent; border: 0;
  color: var(--text-secondary); font-size: 0.82rem;
  cursor: pointer; padding: 0.4rem;
  transition: color 0.2s;
}
.gate-modal__link:hover { color: var(--gold); }
body.light-mode .gate-modal__backdrop { background: rgba(240, 230, 210, 0.78); }
body.light-mode .gate-modal__content { background: #fffdfa; }
body.light-mode .gate-modal__cta { color: #fffdf5; }

/* ── Pastille Premium sur boutons-icônes toolbar BG ── */
.bodygraph-action-btn--gated { position: relative; }
.bodygraph-action-btn--gated::after {
  content: '';
  position: absolute; top: 1px; right: 1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0d878, var(--gold) 70%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.55);
  pointer-events: none;
  animation: gated-pulse 2.6s ease-in-out infinite;
}
@keyframes gated-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
body.light-mode .bodygraph-action-btn--gated::after {
  background: radial-gradient(circle at 30% 30%, #d4a94a, #8b6914 70%);
  box-shadow: 0 0 6px rgba(139, 105, 20, 0.4);
}

/* ── Premium / Pro badge (indicateur inline pour features gatées) ── */
.premium-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.38);
  color: var(--gold);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.premium-badge svg { flex-shrink: 0; opacity: 0.9; }
.premium-badge__text { letter-spacing: inherit; }
.premium-badge--pro {
  background: rgba(168, 120, 220, 0.14);
  border-color: rgba(168, 120, 220, 0.45);
  color: #c9a6f2;
}
.premium-badge--sub {
  padding: 0.05rem 0.35rem;
  font-size: 0.52rem;
  border-radius: 6px;
  margin-left: 0.3rem;
}
.premium-badge--sub svg { width: 7px; height: 7px; }
body.light-mode .premium-badge {
  background: rgba(139, 105, 20, 0.08);
  border-color: rgba(139, 105, 20, 0.32);
  color: #8b6914;
}
body.light-mode .premium-badge--pro {
  background: rgba(107, 70, 160, 0.08);
  border-color: rgba(107, 70, 160, 0.32);
  color: #6b46a0;
}

/* ── Références bibliographiques ── */
.references-wrapper { max-width: 960px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.references-header { text-align: center; margin-bottom: 2.5rem; }
.references-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--gold);
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}
.references-subtitle {
  max-width: 640px; margin: 0 auto;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.65;
}

.references-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1rem 0 1.1rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(to bottom, var(--bg-primary) 85%, rgba(0,0,0,0));
  backdrop-filter: blur(6px);
}
.references-search {
  position: relative;
  display: flex; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 0.85rem;
  transition: border-color 0.2s;
}
.references-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
}
.references-search__icon {
  color: var(--text-secondary);
  flex-shrink: 0;
  opacity: 0.7;
}
.references-search input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  color: var(--text-primary);
  font-family: inherit; font-size: 0.95rem;
  padding: 0.9rem 0.75rem;
}
.references-search input::placeholder { color: rgba(255,255,255,0.35); }
.references-search__clear {
  background: transparent; border: 0;
  color: var(--text-secondary); cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0 0.25rem;
  transition: color 0.2s;
}
.references-search__clear:hover { color: var(--gold); }

.references-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.references-filter {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: inherit; font-size: 0.82rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s;
}
.references-filter:hover {
  color: var(--gold);
  border-color: rgba(201,168,76,0.35);
}
.references-filter.active {
  background: rgba(201,168,76,0.12);
  border-color: var(--gold);
  color: var(--gold);
}

.references-empty {
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  padding: 2.5rem 1rem;
}

.references-section {
  margin-bottom: 3.5rem;
}
.references-section__title {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 400;
  color: var(--gold);
  margin: 0 0 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.references-section__intro {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0 0 1.75rem;
  font-style: italic;
}
.references-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
}
.references-entry {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(201,168,76,0.4);
  border-radius: 8px;
  padding: 1.15rem 1.35rem;
  transition: border-color 0.25s, transform 0.25s;
}
.references-entry:hover {
  border-left-color: var(--gold);
  transform: translateX(2px);
}
.references-entry__meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0 0 0.4rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.references-entry__author { color: var(--gold); font-weight: 500; }
.references-entry__lang {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 3px;
  font-size: 0.68rem;
  color: rgba(201,168,76,0.8);
}
.references-entry__title {
  font-size: 1.02rem;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
  line-height: 1.4;
}
.references-entry__title a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px dashed rgba(201,168,76,0.4);
  transition: color 0.2s, border-color 0.2s;
}
.references-entry__title a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.references-entry__publisher {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0 0 0.5rem;
  font-style: italic;
}
.references-entry__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
.references-entry code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  background: rgba(201,168,76,0.08);
  padding: 0.08rem 0.35rem;
  border-radius: 3px;
  color: var(--gold);
}

.references-footnote {
  text-align: center;
  margin-top: 3rem;
  padding: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.87rem;
  font-style: italic;
  line-height: 1.65;
  border-top: 1px solid var(--border);
}
.references-footnote a { color: var(--gold); text-decoration: none; }
.references-footnote a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .references-wrapper { padding: 2rem 1rem 3.5rem; }
  .references-toolbar { position: static; }
  .references-section { margin-bottom: 2.5rem; }
  .references-entry { padding: 1rem 1.1rem; }
}

/* Light mode */
body.light-mode .references-search { background: #fff; }
body.light-mode .references-search input { color: #1e1e32; }
body.light-mode .references-search input::placeholder { color: rgba(30,30,50,0.4); }
body.light-mode .references-filter { background: #fff; }
body.light-mode .references-entry { background: #fff; }
body.light-mode .references-entry__title { color: #1e1e32; }
body.light-mode .references-entry__title a { color: #1e1e32; }
body.light-mode .references-entry__publisher { color: rgba(30,30,50,0.5); }
body.light-mode .references-toolbar {
  background: linear-gradient(to bottom, var(--bg-primary) 85%, rgba(255,255,255,0));
}

/* ── Back to top ── */
/* Position au-dessus du help-launcher (qui occupe bottom-right) pour éviter
   la superposition qui rendait l'ampoule incliquable. */
.back-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 64px);
  z-index: 901;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(10px);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); color: var(--bg-primary); transform: translateY(-2px); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-bottom: 1rem; font-size: 0.8rem; }
.footer-nav a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.footer-nav a:hover { color: var(--gold); }

/* ── Breadcrumb ── */
.breadcrumb { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb__sep { margin: 0 0.4rem; opacity: 0.5; }

/* ── Internal links nav ── */
.porte-internal-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.porte-internal-links .porte-channel-link { flex: 1; min-width: 200px; }

/* ── Responsive ── */

/* Tablet */
@media (max-width: 1024px) {
  .bodygraph-wrapper { flex-direction: column; padding: 15px; width: 100%; box-sizing: border-box; }
  .bodygraph-legend { flex: none; }
  .bodygraph-container { width: 100%; }
  .bodygraph-container svg { width: 90%; }

  /* Tabs: horizontal scroll */
  .tabs-nav {
    gap: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
    position: relative;
  }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 0.65rem 0.85rem; font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; }

  /* Scroll hints : compact sur mobile */
  .tabs-nav-hint { width: 30px; }
  .tabs-nav-hint svg { width: 12px; height: 12px; }

  /* Birth bar - une seule ligne, info à gauche, actions/pictos à droite */
  .birth-bar { padding: 0.55rem 0.75rem !important; position: relative !important; top: auto !important; }
  .birth-bar__inner {
    flex-direction: row !important;
    gap: 0.5rem !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .birth-bar__info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 0.3rem !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    text-align: left !important;
  }
  .birth-bar__icon { display: none; }
  .birth-bar__name {
    font-size: 0.9rem !important;
    width: auto !important;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40%;
  }
  .birth-bar__date { font-size: 0.72rem !important; white-space: nowrap; }
  .birth-bar__city { display: none !important; } /* masqué mobile pour la ligne unique */
  .birth-bar__info > .birth-bar__sep:last-of-type { display: none !important; }
  .birth-bar__actions {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 0.35rem !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }
  .birth-bar__edit,
  .birth-bar__btn,
  .birth-bar__reset {
    font-size: clamp(0.58rem, 2.2vw, 0.72rem) !important;
    padding: 0.35rem 0.55rem !important;
    flex: 0 0 auto;
  }
  .birth-bar__icon-btn { width: 30px !important; height: 30px !important; padding: 0 !important; }
  .birth-bar__toggle-tips .toggle-tips__label { display: none; }

  /* Aide flottant en haut à droite sur mobile */
  .birth-bar__toggle-tips {
    position: fixed; top: 0.75rem; right: 0.75rem; z-index: 1100;
    padding: 0.35rem; border-radius: 50%; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
  }
  .birth-bar__toggle-tips .toggle-tips__label { display: none; }
  .birth-bar__toggle-tips .toggle-tips__icon { width: 22px; height: 22px; font-size: 0.8rem; }

  /* Summary banner: 2 columns on tablet */
  .summary-banner { gap: 0.5rem; padding: 1rem; }
  .summary-item { flex: 1 1 calc(50% - 0.5rem); min-width: 120px; }
}

/* Summary banner : les valeurs Type/Profil/Autorité/Stratégie/Définition/Croix
   sont des liens vers les CPT correspondants (rebond vers le contenu). */
.summary-value .summary-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.summary-value .summary-link:hover,
.summary-value .summary-link:focus-visible {
  color: var(--gold);
}
/* Picto flèche externe "↗" qui invite au clic.
   Discret par défaut, se décale et s'éclaire au hover. */
.summary-link__icon {
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.55;
  transform: translateY(-1px);
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  vertical-align: middle;
}
.summary-link:hover .summary-link__icon,
.summary-link:focus-visible .summary-link__icon {
  opacity: 1;
  transform: translate(1.5px, -2.5px);
  color: var(--gold);
}

/* Liens CPT inline dans les onglets d'analyse (Type/Profil/Autorité/
   Définition/Croix) - rebond vers le CPT sans fragmenter la lecture. */
.cpt-inline-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(201, 168, 76, 0.5);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.cpt-inline-link:hover,
.cpt-inline-link:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
  outline: none;
}
body.light-mode .cpt-inline-link {
  border-bottom-color: rgba(139, 105, 20, 0.5);
}
body.light-mode .cpt-inline-link:hover,
body.light-mode .cpt-inline-link:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Bloc "Vue" (bodygraph-legend) : toggle replier/déplier.
   Replié par défaut partout (is-collapsed initial), l'user peut étendre
   au clic sur la barre titre. Sa préférence est persistée en localStorage. */
.legend-collapse-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.5rem 0.25rem; margin: 0;
  background: none; border: none; cursor: pointer;
  color: inherit; text-align: left; gap: 0.5rem;
  min-height: 44px;
}
.legend-collapse-btn:hover { opacity: 0.85; }
.legend-collapse-btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}
.legend-title--collapse { margin: 0; flex: 1; }
.legend-collapse-chevron {
  flex-shrink: 0; transition: transform 0.25s ease;
  color: var(--gold);
}
.bodygraph-legend.is-collapsed .legend-collapse-chevron {
  transform: rotate(-90deg);
}
.legend-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  max-height: 1200px; opacity: 1;
}
.bodygraph-legend.is-collapsed .legend-body {
  max-height: 0; opacity: 0;
  pointer-events: none;
}

/* Utility screen-reader-only (accessibilité pour labels icônes) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Cartouche HTML du Body Graph (nom/date/ville/synthèse).
   Affichée UNIQUEMENT sur mobile (≤768px) pour garantir une lisibilité
   et une hiérarchie visuelles correctes. Sur desktop, le cartouche SVG
   (svg-chart-label-group) reste la source de vérité. */
.bg-cartouche { display: none; }
@media (max-width: 768px) {
  .bg-cartouche {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.75rem 0.75rem;
    margin: 0 auto 0.85rem;
    max-width: 92%;
    text-align: center;
  }
  /* Couleurs cartouche par défaut (thème BG nuit : doré sur fond sombre) */
  .bg-cartouche__name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.35rem;
    letter-spacing: 0.22em;
    line-height: 1.1;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(201,168,76,0.45), 0 0 28px rgba(201,168,76,0.18);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  /* Ornements latéraux retirés 2026-05-25 (consigne user) - on garde juste le texte. */
  .bg-cartouche__name::before,
  .bg-cartouche__name::after { content: none; }
  /* Thème jour : pas de glow */
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__name {
    text-shadow: none;
  }
  .bg-cartouche__date {
    font-family: 'Lora', serif;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.3;
  }
  .bg-cartouche__city {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.78rem;
    color: rgba(201,168,76,0.82);
    line-height: 1.3;
  }
  .bg-cartouche__synth {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(201,168,76,0.22);
    width: 100%;
  }
  .bg-cartouche__synth-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 999px;
    font-family: 'Lora', serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .bg-cartouche__synth-label {
    font-family: 'Lora', serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.7);
    padding-right: 0.4rem;
    border-right: 1px solid rgba(201,168,76,0.28);
    line-height: 1;
  }
  .bg-cartouche__synth-value {
    color: var(--gold);
    line-height: 1.15;
  }
  a.bg-cartouche__synth-item:hover,
  a.bg-cartouche__synth-item:focus-visible {
    background: rgba(201,168,76,0.18);
    border-color: rgba(201,168,76,0.5);
    outline: none;
  }
  /* Croix d'incarnation - pill compact aligné sur les synth-items.
     flex-wrap: wrap pour qu'un nom long passe sur 2 lignes au lieu de déborder. */
  .bg-cartouche__cross {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.4rem;
    margin: 0.4rem auto 0;
    padding: 0.25rem 0.65rem;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 12px;
    color: var(--gold);
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .bg-cartouche__cross-label {
    flex: 0 0 auto;
    font-family: 'Lora', serif;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.7);
    padding-right: 0.35rem;
    border-right: 1px solid rgba(201,168,76,0.28);
    line-height: 1;
  }
  .bg-cartouche__cross-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--gold);
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .bg-cartouche__cross-gate {
    flex: 0 0 auto;
    font-family: 'Lora', serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(201,168,76,0.78);
    line-height: 1;
  }
  .bg-cartouche__cross-gate::before { content: '·'; margin-right: 0.3rem; opacity: 0.6; }
  a.bg-cartouche__cross:hover,
  a.bg-cartouche__cross:focus-visible {
    background: rgba(201,168,76,0.16);
    border-color: rgba(201,168,76,0.5);
    outline: none;
  }

  /* Thème BG jour : tout en noir (override indépendant du thème site).
     Déclenché par l'absence de .bg-dark sur le wrapper du BG. */
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__name,
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__date,
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__city { color: #000; }
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__synth {
    border-top-color: rgba(0,0,0,0.18);
  }
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__synth-item {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.3);
    color: #000;
  }
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__synth-label {
    color: rgba(0,0,0,0.55);
    border-right-color: rgba(0,0,0,0.25);
  }
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__synth-value { color: #000; }
  .bodygraph-wrapper:not(.bg-dark) a.bg-cartouche__synth-item:hover,
  .bodygraph-wrapper:not(.bg-dark) a.bg-cartouche__synth-item:focus-visible {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.55);
  }
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__cross {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.3);
    color: #000;
  }
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__cross-label { color: rgba(0,0,0,0.6); }
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__cross-name { color: #000; }
  .bodygraph-wrapper:not(.bg-dark) .bg-cartouche__cross-gate {
    color: rgba(0,0,0,0.65);
  }
  .bodygraph-wrapper:not(.bg-dark) a.bg-cartouche__cross:hover,
  .bodygraph-wrapper:not(.bg-dark) a.bg-cartouche__cross:focus-visible {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.55);
  }

  /* Masque le groupe SVG sur mobile : doublon avec le cartouche HTML */
  #bodygraph-container .svg-chart-label-group,
  .bodygraph-container .svg-chart-label-group { display: none !important; }
}

/* Mobile */
@media (max-width: 768px) {
  /* Header compact (+10px au-dessus pour respirer sur mobile) */
  .site-header { padding: max(30px, calc(var(--sat) + 20px)) 0 1rem; }
  .site-header__inner { padding: 0 1rem; }
  .site-title { font-size: clamp(1.3rem, 5vw, 1.8rem); }

  /* Hero compact */
  .hero { padding: 0 1rem 0.5rem; }
  .hero__title-row { gap: 0.5rem; margin-bottom: 0.35rem; }
  .hero h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
  .hero p { font-size: 0.82rem; line-height: 1.5; max-width: 460px; }

  /* Form remonté */
  .form-section { padding: 0 1rem; margin: 0.75rem auto 1.5rem; }
  .form-card { padding: 1.5rem; }
  .form-row { grid-template-columns: 1fr; gap: 1rem; }
  .form-row--date { grid-template-columns: 1fr 1fr 1fr; }
  .form-row--time { grid-template-columns: 1fr 1fr; }

  /* Results section: 20px padding each side */
  .results-section { padding: 0 20px; margin: 1.5rem auto; }

  /* Mobile : la synthèse est portée par le cartouche HTML (.bg-cartouche)
     rendu DANS #bodygraph-container au-dessus du SVG - le summary-banner
     desktop devient redondant sur mobile et est masqué. Le BG prend ainsi
     toute la largeur du container sans header secondaire. */
  body.has-results .summary-banner { display: none !important; }

  /* Body graph edge-to-edge sur mobile.
     .bodygraph-container est `display: flex` en desktop (cf. règle de base
     ligne 1682) : on le bascule en `flex-direction: column` pour empiler
     le cartouche HTML et le SVG (au lieu de les mettre côte à côte).
     Le SVG prend 100% de la largeur (override du 90% par défaut). */
  .bodygraph-wrapper {
    margin: 0 0 15px; border-radius: 12px;
    padding: 4px 0 10px; gap: 0.5rem;
    width: 100%; box-sizing: border-box;
    flex-wrap: wrap;
  }
  .bodygraph-container {
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: flex-start;
    min-height: unset; width: 100%;
    margin: 0;
    padding: 48px 0 0; /* 0 latéral : le BG prend toute la largeur du wrapper */
    box-sizing: border-box;
  }
  body.is-transit-mode .bodygraph-container {
    padding-top: 8px;
  }
  /* Espace minimal entre le cartouche HTML (synthèse) et le SVG du BG */
  .bodygraph-container > .bg-cartouche { margin-bottom: 12px; }
  .bodygraph-container svg {
    width: 100% !important; max-width: 100%;
    height: auto; display: block;
    margin: 0;
  }
  /* Results section sur mobile : 20px de padding latéral (max demandé).
     Net : le BG SVG colle à 20px du bord du viewport, rien d'autre entre. */
  body.has-results .results-section { padding: 0 20px; }
  /* Actions: horizontal row between BG and legend */
  .bodygraph-actions {
    position: static; flex-direction: row; justify-content: center;
    gap: 8px; order: 2; width: 100%; padding: 0.4rem 0;
  }
  .bodygraph-container { order: 1; }
  /* Filtres : entre la barre d'actions (order 2) et la share-bar (order 99).
     Pose l'order sur le flex-item direct du wrapper (sidebar), pas sur le
     petit-enfant .bodygraph-legend où la règle n'avait aucun effet.
     Padding 15px L/R pour aérer le bloc filtres + mini-controleur transit
     du bord du wrapper (qui est lui edge-to-edge sur mobile). */
  .bodygraph-sidebar {
    order: 3; width: 100%; flex: 0 0 auto; margin-top: 0;
    padding: 0 15px; box-sizing: border-box;
  }
  .bodygraph-legend { order: 3; }
  .bodygraph-action-btn { padding: 0.4rem 0.6rem; }
  .bodygraph-action-btn svg { width: 15px; height: 15px; }

  /* Legend: compact grid on mobile */
  .bodygraph-legend { padding: 0.75rem; border-radius: 8px; margin-top: 0; }
  .legend-title { font-size: 0.95rem; margin-bottom: 0.5rem; }
  .view-modes { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
  .view-btn { padding: 0.4rem 0.6rem; font-size: 0.72rem; }
  .view-btn__swatch { width: 14px; height: 14px; }
  .view-desc { font-size: 0.65rem; margin-bottom: 0; }
  .legend-items { flex-direction: row; flex-wrap: wrap; gap: 0.3rem 0.75rem; }
  .legend-toggle { font-size: 0.7rem; }
  .legend-toggle input[type="checkbox"] { width: 16px; height: 16px; }

  /* Share bar - touch-friendly */
  .share-bar { gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0; justify-content: center; }
  .share-btn { width: 44px; height: 44px; }
  .share-btn svg { width: 18px; height: 18px; }

  /* Tabs: single line scroll */
  .tabs-nav { gap: 0; }
  .tab-btn { padding: 0.6rem 0.75rem; font-size: 0.72rem; }

  /* Tab content compact */
  .tab-content { padding: 1rem 0; }
  .explain-block { padding: 0.85rem 1rem; margin-bottom: 0.6rem; border-radius: 10px; }
  .explain-block h4 { font-size: 1rem; margin-bottom: 0.4rem; }
  .explain-block h5 { font-size: 0.85rem; }
  .explain-block p { font-size: 0.84rem; line-height: 1.55; }
  .explain-block li { font-size: 0.82rem; line-height: 1.55; }

  /* Activations single column */
  .activations-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Accordion compact */
  .accordion-header { padding: 0.8rem 1rem; }
  .accordion-header { padding: 0.75rem 1rem; }
  .accordion-header .acc-title { font-size: 0.85rem; }
  .accordion-body-inner { padding: 0.85rem 1rem; font-size: 0.84rem; line-height: 1.55; }

  /* Footer */
  .site-footer { padding: 2rem 1rem; margin-top: 2rem; font-size: 0.75rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-form { display: none; }
  .footer-col:first-child { display: none; }

  /* Footer legal nav - chips subtiles avec séparateurs */
  .footer-bottom { padding-top: 1.25rem; }
  .footer-bottom p { font-size: 0.72rem; margin-bottom: 0.9rem; line-height: 1.5; }
  .footer-legal-nav {
    flex-wrap: wrap;
    gap: 0.35rem 0;
    margin-top: 0;
    padding: 0.65rem 0.5rem;
    background: rgba(201, 168, 76, 0.04);
    border: 1px solid rgba(201, 168, 76, 0.1);
    border-radius: var(--radius-pill);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-legal-nav a {
    position: relative;
    font-size: 0.7rem;
    padding: 0.25rem 0.7rem;
    letter-spacing: 0.02em;
    color: rgba(240, 238, 235, 0.55);
    white-space: nowrap;
  }
  .footer-legal-nav a + a::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 1px; height: 10px;
    background: rgba(201, 168, 76, 0.2);
    transform: translateY(-50%);
  }
  .footer-legal-nav a:hover,
  .footer-legal-nav a:active { color: var(--gold); }
  body.light-mode .footer-legal-nav {
    background: rgba(139, 105, 20, 0.04);
    border-color: rgba(139, 105, 20, 0.12);
  }
  body.light-mode .footer-legal-nav a { color: rgba(30, 30, 50, 0.55); }
  body.light-mode .footer-legal-nav a + a::before { background: rgba(139, 105, 20, 0.22); }
}

/* Small phones */
@media (max-width: 400px) {
  .form-row--date { grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; }
  .form-group label { font-size: 0.72rem; }
  /* Garde 16px pour éviter le zoom iOS même sur petits écrans */
  .form-group input, .form-group select { padding: 0.65rem 0.7rem; font-size: 16px; }
  .btn-generate { padding: 0.8rem 1.25rem; font-size: 0.82rem; }
  .summary-item { flex: 1 1 100%; }
  .summary-label { font-size: 0.62rem; }
  .summary-value { font-size: 0.85rem; }
  .tab-btn { padding: 0.5rem 0.6rem; font-size: 0.65rem; }
  .birth-bar__name { font-size: 0.95rem; }
  .birth-bar__date, .birth-bar__city { font-size: 0.78rem; }
  .birth-bar__info > button { font-size: 0.72rem; }
  .results-section { padding: 0 10px; }
  .bodygraph-wrapper { padding: 8px; border-radius: 10px; }
  .embed-modal__inner { padding: 1rem; }
  .channel-tag, .dormant-tag { padding: 0.6rem 0.75rem; font-size: 0.82rem; }
}

/* ── Tables (home + porte pages) ── */
.tab-content table,
.porte-content table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 1.5rem 0; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(201,168,76,0.2);
  background: var(--bg-card);
  font-size: 0.88rem;
}
.tab-content thead,
.porte-content thead {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.06));
}
.tab-content th,
.porte-content th {
  padding: 0.75rem 1rem;
  font-family: var(--font-heading);
  font-weight: 500; font-size: 0.85rem;
  color: var(--gold);
  text-align: left;
  letter-spacing: 0.03em;
  border-bottom: 2px solid rgba(201,168,76,0.25);
}
.tab-content td,
.porte-content td {
  padding: 0.7rem 1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.tab-content tr:last-child td,
.porte-content tr:last-child td { border-bottom: none; }
.tab-content tbody tr:hover td,
.porte-content tbody tr:hover td { background: rgba(201,168,76,0.04); }
.tab-content tbody tr:nth-child(even) td,
.porte-content tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.tab-content tbody tr:nth-child(even):hover td,
.porte-content tbody tr:nth-child(even):hover td { background: rgba(201,168,76,0.05); }
.tab-content td strong,
.porte-content td strong { color: var(--text-primary); }
.tab-content td em,
.porte-content td em { color: var(--gold-light); font-style: italic; }
.tab-content td:first-child,
.porte-content td:first-child { color: var(--text-primary); font-weight: 500; }

/* Gate popup modal */
.porte-popup-overlay {
  display: none; position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.75); align-items: center; justify-content: center;
  padding: 2rem;
}
.porte-popup-overlay.open { display: flex; }
.porte-popup {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 700px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.porte-popup__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.porte-popup__title {
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 400;
  color: var(--gold); margin: 0;
}
.porte-popup__close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0;
}
.porte-popup__close:hover { color: var(--text-primary); }
.porte-popup__body {
  padding: 1.5rem; overflow-y: auto; flex: 1;
  color: var(--text-secondary); font-size: 0.88rem; line-height: 1.75;
}
.porte-popup__body h2 {
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 400;
  color: var(--text-primary); margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.porte-popup__body h2:first-child { margin-top: 0; }
.porte-popup__body h3 { font-size: 1.1rem; color: var(--gold-light); margin: 1.2rem 0 0.5rem; }
.porte-popup__body p { margin: 0 0 0.8rem; }
.porte-popup__body ul { margin: 0 0 1rem 1.2rem; padding: 0; }
.porte-popup__body li { margin-bottom: 0.3rem; }
.porte-popup__body strong { color: var(--text-primary); }
.porte-popup__body em { color: var(--gold-light); }
.porte-popup__body blockquote {
  border-left: 3px solid var(--gold); margin: 1rem 0;
  padding: 0.6rem 1rem; background: rgba(201,168,76,0.05);
  border-radius: 0 8px 8px 0; font-style: italic;
}
.porte-popup__loading {
  text-align: center; color: var(--text-muted); padding: 2rem; font-style: italic;
}
.porte-popup__link {
  display: block; text-align: center; padding: 0.8rem;
  border-top: 1px solid var(--border);
  color: var(--gold); text-decoration: none; font-size: 0.85rem; font-weight: 500;
  flex-shrink: 0;
}
.porte-popup__link:hover { background: rgba(201,168,76,0.05); }


/* ── WooCommerce notices - texte blanc en mode sombre (défaut) ── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice,
.wc-block-components-notice-banner,
.wc-block-components-notice-banner__content,
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
  color: #fff;
}
body.light-mode .woocommerce-message,
body.light-mode .woocommerce-error,
body.light-mode .woocommerce-info,
body.light-mode .woocommerce-notice,
body.light-mode .wc-block-components-notice-banner,
body.light-mode .wc-block-components-notice-banner__content,
body.light-mode .woocommerce-message a,
body.light-mode .woocommerce-error a,
body.light-mode .woocommerce-info a {
  color: inherit;
}

/* Order-received : bouton Mon Compte */
.thankyou-account-cta { text-align: center; margin: 2rem 0 1rem; }
.thankyou-account-btn {
  display: inline-block;
  padding: .75rem 2rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity .2s;
}
.thankyou-account-btn:hover { opacity: .85; color: #fff; }
body.light-mode .thankyou-account-btn { color: #fff; }

/* ══════════════════════════════════════════════════════════════
   Onglet "Pour vous" - Analyse IA
   ══════════════════════════════════════════════════════════════ */

/* Bouton onglet IA */
.tab-btn--ai {
  color: var(--gold);
  border-bottom-color: transparent;
  font-weight: 500;
}
.tab-btn--ai:hover { color: var(--gold); opacity: .85; }
.tab-btn--ai.active { color: var(--gold); border-bottom-color: var(--gold); }
body.light-mode .tab-btn--ai { color: #8b6914; }
body.light-mode .tab-btn--ai.active { color: #8b6914; border-bottom-color: #8b6914; }

/* Onglet verrouillé Free (tab Pour vous, Mode de vie, Activations) :
   visuellement marqué par une opacité réduite + un cadenas en suffixe.
   Le bouton reste cliquable - au clic, hd-engine.js rend un teaser
   plein écran avec CTA Premium à la place du contenu normal. */
.tab-btn--locked {
  opacity: 0.78;
  position: relative;
}
.tab-btn--locked::after {
  content: ' 🔒';
  margin-left: 3px;
  font-size: 0.7em;
  opacity: 0.75;
  vertical-align: middle;
}
.tab-btn--locked:hover { opacity: 1; }
body.light-mode .tab-btn--locked { opacity: 0.7; }
body.light-mode .tab-btn--locked:hover { opacity: 1; }
@media (max-width: 600px) {
  .tab-btn--locked::after { font-size: 0.62em; margin-left: 2px; }
}

/* Conteneur principal */
.ai-analysis-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
}

/* Barre d'action (bouton PDF) */
.ai-action-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.ai-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.ai-pdf-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,.06); }
.ai-pdf-btn:disabled { opacity: .55; cursor: not-allowed; }
body.light-mode .ai-pdf-btn { background: #fff; border-color: rgba(0,0,0,.12); color: #555; }
body.light-mode .ai-pdf-btn:hover { border-color: #8b6914; color: #8b6914; }

/* État loading */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  font-size: .95rem;
}
.ai-loading__spinner {
  width: 42px; height: 42px;
  border: 3px solid rgba(180,150,80,.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: aiSpin .8s linear infinite;
}
.ai-loading__text { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.ai-loading__title { font-size: .95rem; color: var(--text-primary, #e8e8e8); }
.ai-loading__hint { font-size: .78rem; color: var(--text-muted); max-width: 360px; line-height: 1.5; }
@keyframes aiSpin { to { transform: rotate(360deg); } }

/* État vide - call-to-action génération */
.ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .9rem;
  padding: 3rem 1.25rem;
  max-width: 540px;
  margin: 0 auto;
}
.ai-empty__icon {
  width: 72px; height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.04));
  border: 1px solid rgba(201,168,76,0.35);
  color: var(--gold);
}
.ai-empty__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-primary, #e8e8e8);
  font-family: var(--font-display, 'Lora', serif);
}
.ai-empty__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 460px;
}
.ai-empty__hint {
  margin: .25rem 0 0;
  font-size: .76rem;
  font-style: italic;
  color: var(--text-muted);
  max-width: 420px;
  line-height: 1.5;
}
.ai-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.6rem;
  background: var(--gold);
  color: #050c1c;
  border: 1px solid var(--gold);
  border-radius: 22px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
  margin: .5rem 0 .25rem;
}
.ai-generate-btn:hover {
  background: #e0bd5e;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(201,168,76,0.32);
}

/* État erreur */
.ai-error {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.25rem 1.4rem;
  margin: 1rem auto;
  max-width: 540px;
  background: rgba(231, 76, 94, 0.08);
  border: 1px solid rgba(231, 76, 94, 0.25);
  border-radius: 10px;
  color: #f0a0a8;
}
.ai-error__msg { margin: 0 0 .65rem; font-size: .88rem; line-height: 1.5; }
.ai-retry-btn {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  color: #fff;
  font-size: .78rem;
  cursor: pointer;
  transition: background .18s;
}
.ai-retry-btn:hover { background: rgba(255,255,255,0.16); }

/* Toolbar : Régénérer / Supprimer (au-dessus du contenu IA) */
.ai-toolbar {
  display: flex;
  gap: .55rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ai-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: .77rem;
  cursor: pointer;
  transition: all .18s;
}
.ai-toolbar__btn:hover { color: var(--gold); border-color: rgba(201,168,76,0.45); background: rgba(201,168,76,0.08); }
.ai-toolbar__btn--del:hover { color: #ff6b7a; border-color: rgba(255,107,122,0.45); background: rgba(255,107,122,0.08); }

/* Modal de confirmation génération (home uniquement) */
.ai-confirm-modal {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.ai-confirm-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 12, 28, 0.78);
  backdrop-filter: blur(4px);
}
.ai-confirm-modal__box {
  position: relative;
  max-width: 460px;
  width: 100%;
  padding: 2rem 1.75rem 1.75rem;
  background: linear-gradient(160deg, #101e3c, #0b1428);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.ai-confirm-modal__icon {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: .35rem;
}
.ai-confirm-modal__box h3 {
  margin: 0 0 .65rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: #f0eeeb;
  font-family: var(--font-display, 'Lora', serif);
}
.ai-confirm-modal__box p {
  margin: 0 0 1.3rem;
  font-size: .87rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.ai-confirm-modal__actions {
  display: flex;
  justify-content: center;
  gap: .65rem;
}
.ai-confirm-modal__btn {
  padding: .55rem 1.25rem;
  border-radius: 22px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  border: 1px solid transparent;
}
.ai-confirm-modal__btn--ghost {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.14);
}
.ai-confirm-modal__btn--ghost:hover { background: rgba(255,255,255,0.12); }
.ai-confirm-modal__btn--primary {
  background: var(--gold);
  color: #050c1c;
  border-color: var(--gold);
}
.ai-confirm-modal__btn--primary:hover { background: #e0bd5e; transform: translateY(-1px); }

/* Light mode overrides */
body.light-mode .ai-empty__title { color: #1a1a1a; }
body.light-mode .ai-empty__text { color: #555; }
body.light-mode .ai-empty__hint { color: #777; }
body.light-mode .ai-loading__title { color: #1a1a1a; }
body.light-mode .ai-loading__hint { color: #777; }
body.light-mode .ai-toolbar { border-bottom-color: rgba(0,0,0,0.08); }
body.light-mode .ai-toolbar__btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.15);
  color: #555;
}
body.light-mode .ai-confirm-modal__box {
  background: linear-gradient(160deg, #fff, #f5efdf);
  border-color: rgba(139,105,20,0.4);
}
body.light-mode .ai-confirm-modal__box h3 { color: #1a1a1a; }
body.light-mode .ai-confirm-modal__box p { color: #555; }
body.light-mode .ai-confirm-modal__btn--ghost {
  background: rgba(0,0,0,0.04);
  color: #555;
  border-color: rgba(0,0,0,0.15);
}
body.light-mode .ai-confirm-modal__btn--primary {
  background: #8b6914; color: #fff; border-color: #8b6914;
}

/* Contenu IA rendu - sections reformatées en .explain-block par wrapAIContent() */
.ai-content { /* conteneur neutre - le style vient des .explain-block enfants */ }
.ai-content .explain-block:last-of-type { margin-bottom: 0; }

/* Badge "Généré par IA" + timestamp */
.ai-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .78rem;
  color: var(--text-secondary);
  opacity: .7;
}
.ai-meta svg { flex-shrink: 0; opacity: .6; }

/* Overlay Premium (non-connecté ou Free) */
.ai-premium-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  background: rgba(5,12,28,.4);
  border: 1px solid rgba(180,150,80,.15);
  border-radius: 8px;
}
.ai-premium-gate__icon {
  width: 52px; height: 52px;
  background: rgba(180,150,80,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.ai-premium-gate__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--gold);
  margin: 0;
}
.ai-premium-gate__text {
  font-size: .9rem;
  color: var(--text-secondary);
  max-width: 380px;
  margin: 0;
  line-height: 1.6;
}
.ai-premium-gate__btn {
  display: inline-block;
  padding: .7rem 1.8rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity .2s;
  margin-top: .5rem;
}
.ai-premium-gate__btn:hover { opacity: .85; color: #fff; }

/* ── Couche Pro (en bas des onglets, pour Premium qui voit le contenu complet) ──
   Variante violette pour distinguer du gold Premium. Injectée par appendProTeaser()
   dans hd-engine.js. */
.premium-gate-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  margin-top: 2rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(168,120,220,0.06), rgba(168,120,220,0.02));
  border: 1px solid rgba(168,120,220,0.2);
  border-radius: 12px;
  position: relative;
}
.premium-gate-cta--pro {
  /* Accent violet (palette Pro = .premium-badge--pro #c9a6f2) */
  border-color: rgba(168,120,220,0.32);
}
.premium-gate-cta__icon {
  width: 44px; height: 44px;
  background: rgba(168,120,220,0.14);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #c9a6f2;
}
.premium-gate-cta__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #c9a6f2;
  margin: 0;
}
.premium-gate-cta__text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0;
  line-height: 1.55;
}
.premium-gate-cta__btn {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  background: linear-gradient(135deg, #6b46a0, #a878dc);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.18s ease;
  margin-top: 0.25rem;
  box-shadow: 0 4px 14px -4px rgba(168,120,220,0.5);
}
.premium-gate-cta__btn:hover,
.premium-gate-cta__btn:focus-visible {
  opacity: 0.92;
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}
.premium-gate-cta__btn--pro {
  /* Variante explicite (déjà gérée par .premium-gate-cta__btn par défaut) */
}
.premium-gate-cta__sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.1rem;
}

/* Mode jour : adoucir l'accent violet sur fond clair */
body.light-mode .premium-gate-cta {
  background: linear-gradient(180deg, rgba(107,70,160,0.05), rgba(107,70,160,0.01));
  border-color: rgba(107,70,160,0.22);
}
body.light-mode .premium-gate-cta--pro { border-color: rgba(107,70,160,0.32); }
body.light-mode .premium-gate-cta__icon {
  background: rgba(107,70,160,0.1);
  color: #6b46a0;
}
body.light-mode .premium-gate-cta__title { color: #6b46a0; }
body.light-mode .premium-gate-cta__text { color: #555; }
body.light-mode .premium-gate-cta__sub { color: #888; }

/* Gate contenu - visiteurs non-connectés */
.anonymous-banner {
  text-align: center;
  padding: .65rem 1.25rem;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--text-secondary);
}
.anonymous-banner a { color: var(--gold); text-decoration: none; font-weight: 500; }
.anonymous-banner a:hover { text-decoration: underline; }

.gate-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}
.gate-content-wrap__icon { font-size: 2rem; }
.gate-content-wrap__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--gold);
  margin: 0;
}
.gate-content-wrap__text {
  font-size: .9rem;
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0;
  line-height: 1.6;
}
.gate-content-wrap__actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.gate-content-wrap__btn-primary {
  display: inline-block;
  padding: .7rem 1.8rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity .2s;
}
.gate-content-wrap__btn-primary:hover { opacity: .85; color: #fff; }
.gate-content-wrap__btn-secondary {
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s;
}
.gate-content-wrap__btn-secondary:hover { color: var(--gold); }

/* Variant Pro : icône + titre + bouton accent violet (palette Pro) */
.gate-content-wrap--pro .gate-content-wrap__icon {
  background: rgba(168,120,220,0.14);
  color: #c9a6f2;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.gate-content-wrap--pro .gate-content-wrap__title { color: #c9a6f2; }
.gate-content-wrap__btn-primary--pro {
  background: linear-gradient(135deg, #6b46a0, #a878dc);
  box-shadow: 0 4px 14px -4px rgba(168,120,220,0.5);
  border-radius: 999px;
}
.gate-content-wrap__btn-primary--pro:hover { opacity: 0.92; color: #fff; }
body.light-mode .gate-content-wrap--pro .gate-content-wrap__icon {
  background: rgba(107,70,160,0.1);
  color: #6b46a0;
}
body.light-mode .gate-content-wrap--pro .gate-content-wrap__title { color: #6b46a0; }

/* Mode jour */
body.light-mode .anonymous-banner { background: rgba(150,110,30,.06); border-color: rgba(150,110,30,.2); }
body.light-mode .gate-content-wrap__text { color: #555; }
body.light-mode .gate-content-wrap__btn-secondary { color: #777; }

/* Mode jour */
body.light-mode .ai-meta { border-top-color: rgba(0,0,0,.1); color: #555; }
body.light-mode .ai-premium-gate { background: rgba(255,255,255,.6); border-color: rgba(139,105,20,.2); }
body.light-mode .ai-premium-gate__title { color: #8b6914; }
body.light-mode .ai-premium-gate__text { color: #555; }

/* ── Mode composite sur la home ── */
body.is-composite-mode .bodygraph-wrapper { flex-direction: column; padding: 1rem 1.5rem; }
body.is-composite-mode .bodygraph-legend { display: none; }
body.is-composite-mode #bodygraph-container { overflow: visible; display: block; flex: unset; width: 100%; min-height: unset; }
body.is-composite-mode #bodygraph-container svg { width: 100%; }
body.is-composite-mode #bodygraph-container .composite-triple { padding: 0.5rem 0; width: 100%; }
/* Flex au lieu de grid : quand un panel est display:none (via filtres), les
   autres se redistribuent automatiquement → composite prend toute la largeur
   quand P1 et P2 sont masqués. */
body.is-composite-mode .composite-triple { display: flex; gap: 1rem; align-items: start; flex-wrap: wrap; }
body.is-composite-mode .composite-triple > .comp-side-panel { flex: 1 1 0; min-width: 0; }
body.is-composite-mode .composite-triple > .comp-center-panel { flex: 1.8 1 0; min-width: 0; }
body.is-composite-mode .comp-center-panel { display: flex; flex-direction: column; }
body.is-composite-mode .comp-side-panel { display: flex; flex-direction: column; gap: 0.5rem; }
body.is-composite-mode .comp-side-panel--1 { align-items: center; }
body.is-composite-mode .comp-side-panel--2 { align-items: center; }
/* Labels et boutons pilotés par bg-dark sur le wrapper (inverse du thème site) */
body.is-composite-mode .comp-side-label { font-size: 0.75rem; color: rgba(0,0,0,0.4); font-style: italic; margin-bottom: 0.3rem; text-align: center; }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-side-label { color: rgba(255,255,255,0.78); }

/* ── Nom grand sous le BG latéral ── */
body.is-composite-mode .comp-side-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: 0.4rem;
  color: rgba(0,0,0,0.82);
  line-height: 1.1;
}
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-side-name { color: rgba(255,255,255,0.9); }

/* ── Mini synthèse sous chaque BG latéral (stack vertical, label small-caps doré puis valeur) ── */
body.is-composite-mode .comp-side-synth {
  width: 100%;
  max-width: 260px;
  margin: 0.5rem 0 0;
  padding: 0.7rem 0.6rem 0.3rem;
  border-top: 0.5px solid rgba(201,168,76,0.35);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: 'Lora', serif;
}
body.is-composite-mode .comp-side-synth__row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.3;
  padding: 0;
  border: 0;
}
body.is-composite-mode .comp-side-synth__row dt {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  opacity: 0.85;
}
body.is-composite-mode .comp-side-synth__row dd {
  margin: 0;
  color: rgba(0,0,0,0.9);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.3;
  word-break: break-word;
}
body.is-composite-mode .comp-side-synth__row dd small.def-missing-gates {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.72em;
  opacity: 0.7;
  font-style: italic;
  font-weight: 400;
  color: rgba(0,0,0,0.65);
}
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-side-synth { border-top-color: rgba(201,168,76,0.4); }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-side-synth__row dd { color: rgba(255,255,255,0.92); }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-side-synth__row dd small.def-missing-gates { color: rgba(255,255,255,0.62); }

/* Responsive : sur mobile (grid 1fr 1fr) - synthèse plus compacte */
@media (max-width: 768px) {
  body.is-composite-mode .comp-side-synth { max-width: 100%; padding: 0.5rem 0.5rem 0.2rem; gap: 0.4rem; }
  body.is-composite-mode .comp-side-synth__row dt { font-size: 0.58rem; letter-spacing: 0.14em; }
  body.is-composite-mode .comp-side-synth__row dd { font-size: 0.86rem; }
}
/* Très petits écrans : layout encore resserré */
@media (max-width: 480px) {
  body.is-composite-mode .comp-side-synth { gap: 0.35rem; padding-top: 0.45rem; }
  body.is-composite-mode .comp-side-synth__row dd { font-size: 0.82rem; line-height: 1.25; }
}

/* ── Filtres d'affichage des 3 BG ── */
body.is-composite-mode .comp-layout-filters {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-family: 'Lora', serif;
  font-size: 0.82rem;
}
body.is-composite-mode .comp-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
  border: 0.5px solid rgba(201,168,76,0.35);
  border-radius: 4px;
  background: rgba(201,168,76,0.06);
  color: rgba(0,0,0,0.82);
  transition: background 0.15s, border-color 0.15s;
}
body.is-composite-mode .comp-filter-item:hover { background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.55); }
body.is-composite-mode .comp-filter-item input[type="checkbox"] { margin: 0; accent-color: var(--gold); cursor: pointer; }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-filter-item { color: rgba(255,255,255,0.88); background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.3); }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-filter-item:hover { background: rgba(201,168,76,0.18); }

/* ── Synthèse sous le BG composite ──
   Grille responsive auto-fit : 2 colonnes sur desktop large, 1 colonne
   sur mobile. Chaque cellule = stack vertical (label small-caps doré
   au-dessus, valeur en dessous) - cohérent avec .comp-side-synth. */
body.is-composite-mode .comp-center-synth {
  width: 100%;
  max-width: 640px;
  margin: 0.9rem auto 0;
  padding: 0.9rem 1rem 0.5rem;
  border-top: 0.5px solid rgba(201,168,76,0.4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem 1.5rem;
  font-family: 'Lora', serif;
}
body.is-composite-mode .comp-center-synth__row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.3;
  padding: 0;
  border: 0;
}
body.is-composite-mode .comp-center-synth__row dt {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  opacity: 0.9;
}
body.is-composite-mode .comp-center-synth__row dd {
  margin: 0;
  color: rgba(0,0,0,0.9);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
  word-break: break-word;
}
body.is-composite-mode .comp-center-synth__row dd small.def-missing-gates {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.76em;
  opacity: 0.7;
  font-style: italic;
  font-weight: 400;
  color: rgba(0,0,0,0.65);
}
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-center-synth { border-top-color: rgba(201,168,76,0.45); }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-center-synth__row dd { color: rgba(255,255,255,0.92); }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-center-synth__row dd small.def-missing-gates { color: rgba(255,255,255,0.6); }

/* ── Groupe "Connexions" : rassemble les 4 types dans un encart dédié ── */
body.is-composite-mode .comp-center-synth__group {
  grid-column: 1 / -1;
  border: 0.5px solid rgba(201,168,76,0.35);
  border-radius: 6px;
  padding: 0.65rem 0.85rem 0.75rem;
  background: rgba(201,168,76,0.04);
  margin: 0.1rem 0 0.2rem;
}
body.is-composite-mode .comp-center-synth__group-title {
  font-family: 'Lora', serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  opacity: 0.9;
  padding: 0 0 0.5rem;
  border-bottom: 0.5px dashed rgba(201,168,76,0.35);
  margin-bottom: 0.55rem;
}
body.is-composite-mode .comp-center-synth__group-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem 1.3rem;
}
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-center-synth__group { border-color: rgba(201,168,76,0.3); background: rgba(201,168,76,0.06); }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-center-synth__group-title { border-bottom-color: rgba(201,168,76,0.3); }
@media (max-width: 480px) {
  body.is-composite-mode .comp-center-synth__group-body { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ── Onglet "Connexions" : état vide (aucun canal de ce type) ── */
.comp-conn-group--empty { opacity: 0.6; }
.comp-conn-group--empty .comp-conn-title { color: rgba(0,0,0,0.55); }
body.dark .comp-conn-group--empty .comp-conn-title,
.dark .comp-conn-group--empty .comp-conn-title { color: rgba(255,255,255,0.6); }
.comp-conn-empty {
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(0,0,0,0.52);
  margin-top: 0.3rem;
}
body.dark .comp-conn-empty,
.dark .comp-conn-empty { color: rgba(255,255,255,0.55); }

/* Responsive : sur écrans moyens, 1 colonne stack vertical (comme side panels) */
@media (max-width: 768px) {
  body.is-composite-mode .comp-center-synth {
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.7rem 0.6rem 0.3rem;
  }
  body.is-composite-mode .comp-center-synth__row dt { font-size: 0.6rem; letter-spacing: 0.14em; }
  body.is-composite-mode .comp-center-synth__row dd { font-size: 0.88rem; }
}
@media (max-width: 480px) {
  body.is-composite-mode .comp-center-synth { gap: 0.45rem; padding-top: 0.5rem; }
  body.is-composite-mode .comp-center-synth__row dd { font-size: 0.84rem; line-height: 1.25; }
}

/* ── Mise en évidence des références P1/P2 dans les blocs d'analyse ── */
.is-composite-mode .comp-person {
  font-weight: 500;
  letter-spacing: 0.01em;
}
.is-composite-mode .comp-person--p1 { color: #7c3aed; }   /* violet P1 (light) */
.is-composite-mode .comp-person--p2 { color: #ea580c; }   /* orange P2 (light) */
/* Variante dark : légèrement plus claire pour contraste */
.is-composite-mode .dark .comp-person--p1,
.is-composite-mode body.dark .comp-person--p1 { color: #a78bfa; }
.is-composite-mode .dark .comp-person--p2,
.is-composite-mode body.dark .comp-person--p2 { color: #fb923c; }
body.is-composite-mode .comp-center-label { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; margin-bottom: 0.75rem; }
body.is-composite-mode .comp-label-quantum { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 300; font-style: italic; color: var(--gold); letter-spacing: 0.08em; line-height: 1.15; }
body.is-composite-mode .comp-label-names { display: inline-block; font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-style: italic; font-weight: 400; letter-spacing: 0.04em; opacity: 0.92; }
body.is-composite-mode .comp-label-formula { font-family: 'Lora', serif; font-size: 0.9rem; font-style: italic; color: rgba(201,168,76,0.65); letter-spacing: 0.04em; margin-top: 0.15rem; }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-label-formula { color: rgba(201,168,76,0.65); }
body.is-composite-mode #bodygraph-wrapper:not(.bg-dark) .comp-label-quantum { color: #8b6914; }
body.is-composite-mode #bodygraph-wrapper:not(.bg-dark) .comp-label-formula { color: rgba(139,105,20,0.7); }
body.is-composite-mode .composite-mode-toggle { justify-content: center; margin-bottom: 0.5rem; }
body.is-composite-mode .comp-mode-btn { padding: 0.3rem 0.75rem; border-radius: 4px; border: 1px solid rgba(201,168,76,0.3); background: transparent; color: rgba(0,0,0,0.4); cursor: pointer; font-size: 0.82rem; transition: all 0.2s; }
body.is-composite-mode .comp-mode-btn.active { background: rgba(201,168,76,0.15); color: var(--gold); border-color: var(--gold); }
body.is-composite-mode #bodygraph-wrapper.bg-dark .comp-mode-btn { color: rgba(255,255,255,0.78); }
#comp-home-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.5rem 1rem 0; font-size: 0.78rem; }
#comp-home-legend .comp-legend-item { display: flex; align-items: center; gap: 0.35rem; }
#comp-home-legend .comp-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
#comp-home-legend .comp-formula { width: 100%; display: flex; gap: 0.5rem; margin-top: 0.25rem; }
#comp-home-legend .comp-formula__value { color: var(--gold); font-style: italic; font-size: 0.85rem; }

@media (max-width: 768px) {
  /* Mobile : composite prend toute la largeur en haut, P1 et P2 partagent la 2e ligne */
  body.is-composite-mode .composite-triple > .comp-center-panel { flex: 1 1 100%; order: 1; }
  body.is-composite-mode .composite-triple > .comp-side-panel--1 { flex: 1 1 calc(50% - 0.5rem); order: 2; }
  body.is-composite-mode .composite-triple > .comp-side-panel--2 { flex: 1 1 calc(50% - 0.5rem); order: 2; }
}

/* Masquer les éléments non pertinents pour le BG composite :
   - boutons Dream Rave / Gene Keys / toggle thème sombre (composite toujours clair)
   - PDF / IA / embed (réservés au BG individuel)
   - blocs célébrités (affinités & compat réservés au BG individuel) */
body.is-composite-mode #btn-dream-toggle,
body.is-composite-mode #btn-gk-toggle,
body.is-composite-mode #toggle-dark-bg,
body.is-composite-mode #share-pdf,
body.is-composite-mode #share-embed,
body.is-composite-mode #btn-go-ai,
body.is-composite-mode .celeb-affinity,
body.is-composite-mode .celeb-compat { display: none !important; }

/* TODO: à retirer quand on remet le bloc compatibilité célébrités en ligne. */
.celeb-compat { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   Analyse composite - blocs narratifs sous le BG
   ══════════════════════════════════════════════════════════════ */
/* Defaults : suivent le mode du site (dark par défaut, clair via .light-mode). */
body.is-composite-mode .comp-analysis-block { margin: 1.5rem 0; color: var(--text-primary); }
body.is-composite-mode .comp-analysis-block h3 { margin: 0 0 1rem; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; color: var(--gold); letter-spacing: 0.02em; }
body.is-composite-mode .comp-analysis-block h4.comp-subhead { margin: 1.25rem 0 .4rem; font-family: 'Lora', serif; font-size: 1rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; }
body.is-composite-mode .comp-analysis-block p { margin: 0 0 .6rem; line-height: 1.6; color: var(--text-primary); }
body.is-composite-mode .comp-score-line { font-size: 1.05rem; color: var(--text-primary); }
body.is-composite-mode .comp-score-line em { color: var(--gold); font-style: normal; font-weight: 600; }
body.is-composite-mode .comp-struct-line,
body.is-composite-mode .comp-vent-line { font-size: .95rem; opacity: .9; color: var(--text-primary); }
body.is-composite-mode .comp-narr { font-size: .95rem; line-height: 1.65; opacity: .9; margin-top: .35rem; color: var(--text-primary); }

/* Connexions canal par canal */
body.is-composite-mode .comp-conn-group { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12); color: var(--text-primary); }
body.is-composite-mode .comp-conn-group:first-of-type { border-top: none; padding-top: 0; }
body.is-composite-mode .comp-conn-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-family: 'Lora', serif; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
body.is-composite-mode .comp-conn-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
body.is-composite-mode .comp-conn-desc { font-size: .88rem; opacity: .78; margin: 0 0 .5rem; color: var(--text-primary); }
body.is-composite-mode .comp-conn-list { padding-left: 1.25rem; margin: 0; color: var(--text-primary); }
body.is-composite-mode .comp-conn-list li { margin-bottom: .5rem; line-height: 1.55; }
body.is-composite-mode .comp-conn-circuit { opacity: .75; font-style: italic; font-size: .92rem; color: var(--text-primary); }
body.is-composite-mode .comp-conn-note { display: inline-block; margin-top: .15rem; font-size: .86rem; opacity: .85; line-height: 1.5; font-style: italic; color: var(--text-primary); }

/* Tableau des centres composite */
body.is-composite-mode .comp-centers-table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .92rem; color: var(--text-primary); }
body.is-composite-mode .comp-centers-table th { text-align: left; padding: .5rem .65rem; border-bottom: 2px solid rgba(255,255,255,0.2); font-weight: 600; font-family: 'Lora', serif; color: var(--text-primary); }
body.is-composite-mode .comp-centers-table th.col-center { text-align: center; }
body.is-composite-mode .comp-centers-table td { padding: .42rem .65rem; border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--text-primary); }
body.is-composite-mode .comp-centers-table td.cell-name { font-weight: 500; }
body.is-composite-mode .comp-centers-table td.cell-state { text-align: center; font-size: .88rem; }
body.is-composite-mode .comp-centers-table td.cell-state.is-defined { color: #7dd39f; font-weight: 500; }
body.is-composite-mode .comp-centers-table td.cell-state.is-open { color: rgba(255,255,255,0.5); }
body.is-composite-mode .comp-centers-emrg { margin-top: .8rem; padding: .65rem .85rem; background: rgba(201,168,76,0.08); border-left: 3px solid var(--gold); font-size: .9rem; line-height: 1.55; border-radius: 0 4px 4px 0; color: var(--text-primary); }

/* Overrides mode clair (site en light-mode) : rétablit contrastes noirs */
body.light-mode.is-composite-mode .comp-conn-group { border-top-color: rgba(0,0,0,0.08); }
body.light-mode.is-composite-mode .comp-centers-table th { border-bottom-color: rgba(0,0,0,0.12); }
body.light-mode.is-composite-mode .comp-centers-table td { border-bottom-color: rgba(0,0,0,0.06); }
body.light-mode.is-composite-mode .comp-centers-table td.cell-state.is-defined { color: #1a5e3a; }
body.light-mode.is-composite-mode .comp-centers-table td.cell-state.is-open { color: rgba(0,0,0,0.45); }

/* Profils & chemins */
body.is-composite-mode .comp-prof-pair,
body.is-composite-mode .comp-cross-pair,
body.is-composite-mode .comp-type-pair,
body.is-composite-mode .comp-strat-pair,
body.is-composite-mode .comp-auth-pair { line-height: 1.7; }
body.is-composite-mode .comp-geom-line { margin-top: .5rem; font-size: .92rem; opacity: .85; font-style: italic; }
body.is-composite-mode .comp-shared-list { font-size: .92rem; opacity: .85; font-family: 'Lora', serif; letter-spacing: 0.02em; }

@media (max-width: 640px) {
  body.is-composite-mode .comp-centers-table { font-size: .84rem; }
  body.is-composite-mode .comp-centers-table th,
  body.is-composite-mode .comp-centers-table td { padding: .35rem .35rem; }
  body.is-composite-mode .comp-centers-table td.cell-state { font-size: .78rem; }
}

/* ══════════════════════════════════════════════════════════════
   PDF Template Selector Modal
   ══════════════════════════════════════════════════════════════ */
.hd-pdf-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(5, 12, 28, 0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  animation: hdPdfFadeIn .22s ease-out;
}
@keyframes hdPdfFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hd-pdf-modal-panel {
  background: linear-gradient(180deg, #0b1428 0%, #050c1c 100%);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 14px;
  max-width: 960px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 168, 76, 0.08);
  padding: 2rem 2rem 2.25rem;
  color: #f0ede8;
  position: relative;
  animation: hdPdfSlideUp .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes hdPdfSlideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hd-pdf-modal-header { margin-bottom: 1.5rem; padding-right: 2.5rem; }
.hd-pdf-modal-header h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.7rem; font-weight: 600;
  color: var(--gold); margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
}
.hd-pdf-modal-header p {
  color: #8a8694; font-size: 0.92rem;
  margin: 0; font-style: italic;
}
.hd-pdf-modal-close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: transparent; border: 1px solid rgba(201, 168, 76, 0.25);
  color: var(--gold); width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer;
  font-size: 1.35rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s ease;
}
.hd-pdf-modal-close:hover {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--gold);
  transform: rotate(90deg);
}
.hd-pdf-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.hd-pdf-tpl-card {
  background: rgba(16, 30, 60, 0.5);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 10px;
  padding: 0; margin: 0;
  cursor: pointer;
  overflow: hidden;
  transition: all .25s cubic-bezier(.2,.9,.3,1);
  text-align: left;
  font-family: inherit; color: inherit;
  display: flex; flex-direction: column;
}
.hd-pdf-tpl-card:hover {
  border-color: var(--gold);
  background: rgba(16, 30, 60, 0.8);
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 168, 76, 0.25);
}
.hd-pdf-tpl-card.is-last-choice {
  border-color: rgba(201, 168, 76, 0.55);
}
.hd-pdf-tpl-card.is-locked {
  opacity: 0.58;
  cursor: help;
}
.hd-pdf-tpl-card.is-locked:hover {
  opacity: 0.85;
  border-color: rgba(201, 168, 76, 0.35);
}
.hd-pdf-tpl-thumb {
  position: relative;
  aspect-ratio: 5 / 7;
  background: #050c1c;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hd-pdf-tpl-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hd-pdf-tpl-thumb.no-thumb {
  color: var(--gold);
  font-family: 'Lora', Georgia, serif;
}
.hd-pdf-tpl-thumb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.4rem 1rem;
  text-align: center;
  width: 100%;
  height: 100%;
}
.hd-pdf-tpl-thumb-mark {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  font-weight: 500;
  opacity: 0.85;
}
.hd-pdf-tpl-thumb-rule {
  width: 38px; height: 1px;
  opacity: 0.7;
}
.hd-pdf-tpl-thumb-title {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.15;
  font-weight: 500;
}
.hd-pdf-tpl-thumb-tag {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.85;
  margin-top: 0.2rem;
}
.hd-pdf-tpl-lock {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: rgba(5, 12, 28, 0.92);
  color: var(--gold);
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(201, 168, 76, 0.4);
}
.hd-pdf-tpl-badge {
  position: absolute; top: 0.6rem; left: 0.6rem;
  background: rgba(201, 168, 76, 0.92);
  color: #050c1c;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hd-pdf-tpl-info {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
}
.hd-pdf-tpl-info strong {
  display: block;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  color: #f0ede8;
  margin-bottom: 0.2rem;
  font-weight: 600;
}
.hd-pdf-tpl-info span {
  display: block;
  font-size: 0.78rem;
  color: #8a8694;
  font-style: italic;
  line-height: 1.4;
}
@media (max-width: 720px) {
  .hd-pdf-modal-panel { padding: 1.5rem 1.25rem 1.75rem; }
  .hd-pdf-modal-header h2 { font-size: 1.35rem; }
  .hd-pdf-modal-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .hd-pdf-tpl-thumb { aspect-ratio: 16 / 10; }
}
/* Light mode : on garde le panneau bleu nuit, c'est volontaire pour l'identité premium */

/* ── Flash banners (Stripe return, one-time messages) ── */
.hd-flash {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 920px;
  margin: 1.25rem auto 0;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  font-family: 'Lora', Georgia, serif;
  line-height: 1.5;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  position: relative;
}
.hd-flash svg { flex-shrink: 0; margin-top: 0.15rem; }
.hd-flash strong { font-size: 1rem; display: block; margin-bottom: 0.15rem; }
.hd-flash p { font-size: 0.88rem; margin: 0; opacity: 0.9; }
.hd-flash__close {
  position: absolute; top: 0.5rem; right: 0.7rem;
  background: transparent; border: 0; color: inherit;
  font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.6;
  padding: 0.2rem 0.4rem;
}
.hd-flash__close:hover { opacity: 1; }
.hd-flash--success {
  background: linear-gradient(135deg, rgba(201,168,76,0.18), rgba(201,168,76,0.08));
  border: 1px solid rgba(201,168,76,0.45);
  color: var(--text-primary, #f0ede8);
}
.hd-flash--success svg { color: var(--gold); }
.hd-flash--info {
  background: rgba(80,120,180,0.12);
  border: 1px solid rgba(120,160,200,0.35);
  color: var(--text-primary, #f0ede8);
}
.hd-flash--info svg { color: #8aa8c8; }
.hd-flash--error {
  background: rgba(200,80,80,0.12);
  border: 1px solid rgba(220,100,100,0.4);
  color: var(--text-primary, #f0ede8);
}
.hd-flash--error svg { color: #d46666; }
@media (max-width: 640px) {
  .hd-flash { margin: 1rem 1rem 0; padding: 0.9rem 1rem; }
  .hd-flash strong { font-size: 0.95rem; }
  .hd-flash p { font-size: 0.82rem; }
}

/* ── Bouton résiliation / réactivation (mon-compte subscription) ── */
.mc-sub__cancel-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: 0.75rem; padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px solid rgba(200, 100, 100, 0.35);
  color: #c77070;
  border-radius: 8px;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.mc-sub__cancel-btn:hover {
  background: rgba(200, 100, 100, 0.12);
  border-color: rgba(200, 100, 100, 0.6);
  color: #d48080;
}
.mc-sub__cancel-btn--reactivate {
  border-color: rgba(100, 180, 120, 0.4);
  color: #80c090;
}
.mc-sub__cancel-btn--reactivate:hover {
  background: rgba(100, 180, 120, 0.12);
  border-color: rgba(100, 180, 120, 0.6);
  color: #a0d8b0;
}

/* ── Modal confirmation résiliation ── */
.hd-cancel-modal {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  z-index: 9500;
}
.hd-cancel-modal.open { display: flex; }
.hd-cancel-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 12, 28, 0.82);
  backdrop-filter: blur(3px);
}
.hd-cancel-modal__panel {
  position: relative;
  max-width: 460px; width: calc(100% - 2rem);
  background: var(--bg-secondary, #101e3c);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 14px;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  text-align: center;
  font-family: 'Lora', Georgia, serif;
  color: var(--text-primary, #f0ede8);
}
.hd-cancel-modal__close {
  position: absolute; top: 0.6rem; right: 0.8rem;
  background: transparent; border: 0;
  color: var(--text-muted, #8a8694);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.hd-cancel-modal__close:hover { color: var(--text-primary); }
.hd-cancel-modal__icon { color: #c77070; margin-bottom: 0.75rem; }
.hd-cancel-modal__title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 400;
  margin: 0 0 0.75rem;
  color: var(--gold);
}
.hd-cancel-modal__lead {
  font-size: 0.92rem; line-height: 1.55;
  margin: 0 0 1rem;
  color: var(--text-secondary, #b8b4c0);
}
.hd-cancel-modal__list {
  text-align: left;
  font-size: 0.82rem; line-height: 1.55;
  color: var(--text-secondary, #b8b4c0);
  margin: 0 0 1.25rem; padding: 0 0 0 1.1rem;
}
.hd-cancel-modal__list li { margin-bottom: 0.35rem; }
.hd-cancel-modal__actions {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
}
.hd-cancel-modal__btn {
  padding: 0.65rem 1.2rem;
  border-radius: 8px;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  min-width: 130px;
  position: relative;
}
.hd-cancel-modal__btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.18);
  color: var(--text-secondary, #b8b4c0);
}
.hd-cancel-modal__btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.hd-cancel-modal__btn--danger {
  background: #c66060;
  border-color: #c66060;
  color: #fff;
}
.hd-cancel-modal__btn--danger:hover {
  background: #b85050;
  border-color: #b85050;
}
.hd-cancel-modal__btn--danger:disabled {
  opacity: 0.7; cursor: not-allowed;
}
.hd-cancel-modal__btn-spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hd-spin 0.7s linear infinite;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.hd-cancel-modal__btn.loading .hd-cancel-modal__btn-spinner { display: inline-block; }
@keyframes hd-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   A11Y - focus visible global (WCAG 2.4.7)
   Override systématique des `outline:none` historiques. N'affecte
   que la navigation clavier grâce à :focus-visible - aucun effet
   sur les clics souris.
   ════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.22) !important;
  border-radius: 4px;
}
/* Skip link focus : plein gold contrasté */
.skip-link:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   A11Y - prefers-reduced-motion (WCAG 2.3.3)
   Neutralise animations/transitions pour users sensibles au mouvement.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   A11Y - skip link (WCAG 2.4.1)
   Caché visuellement, apparaît au focus clavier en haut de page.
   ════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100000;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.85rem 1.4rem;
  background: var(--gold);
  color: #050c1c;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ── Bandeau édition BG enregistré (/?edit=xxx) ── */
.edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto 1.25rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.08), rgba(123, 104, 238, 0.04));
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 12px;
  font-family: var(--font-body);
}
.edit-banner__info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}
.edit-banner__icon {
  color: var(--gold);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.edit-banner__text { min-width: 0; }
.edit-banner__title {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.4;
}
.edit-banner__title strong { color: var(--gold); }
.edit-banner__sub {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.edit-banner__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.edit-banner__back:hover {
  background: rgba(201, 168, 76, 0.2);
  transform: translateX(-2px);
}
body.light-mode .edit-banner {
  background: linear-gradient(135deg, rgba(139, 105, 20, 0.05), rgba(123, 104, 238, 0.03));
  border-color: rgba(139, 105, 20, 0.3);
}
body.light-mode .edit-banner__title strong,
body.light-mode .edit-banner__back { color: #8b6914; }
body.light-mode .edit-banner__back { background: rgba(139, 105, 20, 0.08); }
body.light-mode .edit-banner__back:hover { background: rgba(139, 105, 20, 0.16); }
@media (max-width: 600px) {
  .edit-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
  }
  .edit-banner__back { justify-content: center; }
}
/* Variante : ajout d'un BG depuis Mon Compte (accent violet/indigo) */
.edit-banner--add {
  background: linear-gradient(135deg, rgba(123, 104, 238, 0.1), rgba(201, 168, 76, 0.04));
  border-color: rgba(123, 104, 238, 0.4);
}
.edit-banner--add .edit-banner__icon { color: #9d8bff; }
.edit-banner--add .edit-banner__title strong { color: #b5a6ff; }
.edit-banner--add .edit-banner__back {
  background: rgba(123, 104, 238, 0.12);
  color: #b5a6ff;
}
.edit-banner--add .edit-banner__back:hover { background: rgba(123, 104, 238, 0.22); }
body.light-mode .edit-banner--add {
  background: linear-gradient(135deg, rgba(123, 104, 238, 0.08), rgba(139, 105, 20, 0.03));
  border-color: rgba(123, 104, 238, 0.35);
}
body.light-mode .edit-banner--add .edit-banner__icon,
body.light-mode .edit-banner--add .edit-banner__title strong,
body.light-mode .edit-banner--add .edit-banner__back { color: #5648a8; }
body.light-mode .edit-banner--add .edit-banner__back { background: rgba(123, 104, 238, 0.1); }
body.light-mode .edit-banner--add .edit-banner__back:hover { background: rgba(123, 104, 238, 0.18); }

/* ── Time Scrubber : slider ±24h autour de l'heure enregistrée (mode /?edit=) ── */
.edit-time-scrubber {
  max-width: 760px;
  margin: 0 auto 1.25rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(123, 104, 238, 0.06), rgba(201, 168, 76, 0.04));
  border: 1px solid rgba(123, 104, 238, 0.3);
  border-radius: 12px;
  font-family: var(--font-body);
}
.edit-time-scrubber__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.edit-time-scrubber__info {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}
.edit-time-scrubber__label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.edit-time-scrubber__current {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}
.edit-time-scrubber__delta {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  transition: color 0.2s;
}
.edit-time-scrubber__delta.is-shifted { color: #7b68ee; font-weight: 500; }
.edit-time-scrubber__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  background: rgba(201, 168, 76, 0.08);
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.25);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.edit-time-scrubber__reset:hover {
  background: rgba(201, 168, 76, 0.16);
}
.edit-time-scrubber__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.edit-time-scrubber__save {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  background: var(--gold, #c9a84c);
  color: #050c1c;
  border: 1px solid var(--gold, #c9a84c);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s, box-shadow 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -6px rgba(var(--gold-rgb, 201, 168, 76), 0.55);
}
.edit-time-scrubber__save:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(var(--gold-rgb, 201, 168, 76), 0.7);
}
.edit-time-scrubber__save:disabled { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }
.edit-time-scrubber__save[hidden] { display: none; }
body.light-mode .edit-time-scrubber__save { background: #8b6914; border-color: #8b6914; color: #fff; }

/* En mode édition, masque les boutons devenus redondants dans le bandeau flottant */
body.hd-editing #btn-edit,
body.hd-editing #btn-reset { display: none !important; }

/* En mode édition, pas de pictos flottants au scroll (avatar, thème, nav BG) */
body.hd-editing .birth-bar .birth-bar__sticky-only,
body.hd-editing .birth-bar.is-stuck .birth-bar__sticky-only,
body.hd-editing #hd-nav-float { display: none !important; }

/* En mode édition, bandeau sans fond, non-flottant, contenu centré */
body.hd-editing .birth-bar,
body.light-mode.hd-editing .birth-bar {
  position: static;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: none;
}
body.hd-editing .birth-bar__inner {
  justify-content: center;
}
body.hd-editing .birth-bar__info {
  justify-content: center;
  flex: 1 1 auto;
}
.edit-time-scrubber__slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.edit-time-scrubber__bound {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.edit-time-scrubber__slider {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    rgba(123, 104, 238, 0.2) 0%,
    rgba(201, 168, 76, 0.4) 50%,
    rgba(123, 104, 238, 0.2) 100%);
  outline: none;
  cursor: pointer;
}
.edit-time-scrubber__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #0b1428;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.5);
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.2s;
}
.edit-time-scrubber__slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
  cursor: grabbing;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.25);
}
.edit-time-scrubber__slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #0b1428;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.5);
  cursor: grab;
}
.edit-time-scrubber__jumps {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.edit-time-scrubber__jump {
  padding: 0.3rem 0.7rem;
  font-size: 0.76rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-variant-numeric: tabular-nums;
}
.edit-time-scrubber__jump:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: rgba(201, 168, 76, 0.4);
  color: var(--gold);
}
body.light-mode .edit-time-scrubber {
  background: linear-gradient(135deg, rgba(123, 104, 238, 0.05), rgba(139, 105, 20, 0.03));
  border-color: rgba(123, 104, 238, 0.25);
}
body.light-mode .edit-time-scrubber__current,
body.light-mode .edit-time-scrubber__reset { color: #8b6914; }
body.light-mode .edit-time-scrubber__reset { background: rgba(139, 105, 20, 0.06); border-color: rgba(139, 105, 20, 0.2); }
body.light-mode .edit-time-scrubber__slider::-webkit-slider-thumb,
body.light-mode .edit-time-scrubber__slider::-moz-range-thumb { background: #8b6914; border-color: #fff; }
body.light-mode .edit-time-scrubber__jump {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
}
body.light-mode .edit-time-scrubber__jump:hover {
  background: rgba(139, 105, 20, 0.08);
  border-color: rgba(139, 105, 20, 0.3);
  color: #8b6914;
}
@media (max-width: 600px) {
  .edit-time-scrubber { padding: 0.85rem 1rem; }
  .edit-time-scrubber__header { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .edit-time-scrubber__current { font-size: 0.95rem; }
  .edit-time-scrubber__jumps { gap: 0.3rem; }
  .edit-time-scrubber__jump { font-size: 0.72rem; padding: 0.25rem 0.55rem; }
}

/* ── Controls directs date/heure/ville dans le widget scrubber ── */
.edit-time-scrubber__controls {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 0 0 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
/* Le nom occupe la 1re ligne complète : input large pour confort de saisie. */
.edit-time-scrubber__control--name { grid-column: 1 / -1; }
.edit-time-scrubber__name-input { width: 100%; max-width: 360px; cursor: text; }
.edit-time-scrubber__control {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.edit-time-scrubber__control label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  font-weight: 600;
}
.edit-time-scrubber__date-row,
.edit-time-scrubber__time-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.edit-time-scrubber__colon {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 0.1rem;
}
.edit-time-scrubber__controls select,
.edit-time-scrubber__controls input[type="text"] {
  background: rgba(5, 12, 28, 0.55);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.48rem 0.6rem;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  cursor: pointer;
}
.edit-time-scrubber__controls select:hover,
.edit-time-scrubber__controls input[type="text"]:hover {
  border-color: rgba(201, 168, 76, 0.4);
  background: rgba(5, 12, 28, 0.7);
}
.edit-time-scrubber__controls select:focus,
.edit-time-scrubber__controls input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}
.edit-time-scrubber__controls select { min-width: 60px; }
.edit-time-scrubber__control--date select:nth-child(2) { min-width: 110px; }
.edit-time-scrubber__control--date select:nth-child(3) { min-width: 80px; }
.edit-time-scrubber__city-wrap {
  position: relative;
}
.edit-time-scrubber__city-wrap input[type="text"] {
  width: 100%;
  cursor: text;
}
body.light-mode .edit-time-scrubber__controls {
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .edit-time-scrubber__controls select,
body.light-mode .edit-time-scrubber__controls input[type="text"] {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(139, 105, 20, 0.25);
  color: var(--text-primary);
}
body.light-mode .edit-time-scrubber__controls select:hover,
body.light-mode .edit-time-scrubber__controls input[type="text"]:hover {
  border-color: rgba(139, 105, 20, 0.45);
  background: rgba(255, 255, 255, 1);
}
body.light-mode .edit-time-scrubber__controls select:focus,
body.light-mode .edit-time-scrubber__controls input[type="text"]:focus {
  border-color: #8b6914;
  box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.15);
}
body.light-mode .edit-time-scrubber__colon { color: #8b6914; }
@media (max-width: 780px) {
  .edit-time-scrubber__controls { grid-template-columns: 1fr 1fr; }
  .edit-time-scrubber__control--city { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .edit-time-scrubber__controls { grid-template-columns: 1fr; gap: 0.65rem; }
  .edit-time-scrubber__date-row select,
  .edit-time-scrubber__time-row select { flex: 1 1 0; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE P0 - iOS anti-zoom + touch targets
   iOS zoome automatiquement les inputs dont font-size < 16px au focus.
   On force 16px sur tous les inputs/textareas/selects ≤ 768px.
   Les styles existants conservent leur aspect visuel (padding, hauteur)
   car seul le font-size est contraint.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    font-size: max(16px, 1rem);
  }
}
/* Touch targets minimum 44×44 (WCAG 2.5.5) - ciblage des boutons icône
   critiques qui restent sous la limite malgré le padding. */
@media (max-width: 768px) {
  button, a.btn, .btn, [role="button"] {
    min-height: 44px;
  }
  /* Exceptions : boutons inline dans du texte ou toggles compacts */
  button.inline, .tab-btn, .mc-tab, .nav-bg-tab, .share-btn--analyse,
  .references-filter, .celeb-filter, .hd-tip__close,
  .tabs-nav button, .comp-mode-btn {
    min-height: unset;
  }
}

/* ══════════════════════════════════════════════════════════════
   Light mode - bordures sobres des cards/tiles « inactives »
   ───────────────────────────────────────────────────────────────
   Les cards définies pour le thème sombre utilisent des couleurs
   blanches à alpha faible (rgba(255,255,255,0.05-0.08)) qui
   deviennent invisibles en mode jour. Ce bloc restaure un contour
   discret mais lisible (rgba(0,0,0,0.1)) sur les blocs cliquables
   ou informatifs les plus courants du site.
   ══════════════════════════════════════════════════════════════ */
body.light-mode .porte-grid-card,
body.light-mode .croix-decl-card,
body.light-mode .guide-section-card,
body.light-mode .engine-infobox__card,
body.light-mode .chart-card__quickview,
body.light-mode .game-mode-card,
body.light-mode .game-option,
body.light-mode .game-step,
body.light-mode .celeb-affinity__photo,
body.light-mode .bg-illustration-wrap,
body.light-mode .chart-recap__row,
body.light-mode .chart-recap__planet,
body.light-mode .hd-schema-item,
body.light-mode .comp-pick-item,
body.light-mode .mc-pdf-tpl-swatch {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .porte-grid-card:hover,
body.light-mode .croix-decl-card:hover,
body.light-mode .guide-section-card:hover,
body.light-mode .game-mode-card:hover,
body.light-mode .game-option:hover,
body.light-mode .game-step:hover,
body.light-mode .bg-illustration-wrap:hover,
body.light-mode .chart-recap__row:hover,
body.light-mode .chart-card__quickview:hover,
body.light-mode .hd-schema-item:hover,
body.light-mode .comp-pick-item:hover {
  background: rgba(139, 105, 20, 0.06);
  border-color: rgba(139, 105, 20, 0.35);
}

/* Details/Summary repliables (ex. .croix-declinaisons__details, .archive-intro__rest) */
body.light-mode .croix-declinaisons__details,
body.light-mode .archive-intro__rest {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* Liens/CTA à contour subtil */
body.light-mode .celeb-affinity__cta-link {
  border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .celeb-affinity__cta-link:hover {
  border-color: rgba(139, 105, 20, 0.4);
}

/* Tags dormants / pastilles informatives */
body.light-mode .dormant-tag {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Options ville (typeahead) */
body.light-mode .city-option {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Filtres de recherche */
body.light-mode .hd-search-filters {
  border-color: rgba(0, 0, 0, 0.1);
}

/* Declinaisons croix - titre */
body.light-mode .croix-decl-card--current {
  box-shadow: 0 0 0 1px rgba(139, 105, 20, 0.3), 0 4px 16px rgba(139, 105, 20, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════
 * Voice notes - opener + tips (infusion éditoriale)
 * Classes : .hd-opener (paragraphe d'ouverture), .hd-note (encadré).
 * Voir inc/content-voice.php pour le pool d'extraits.
 * Pas de signature visuelle (ni avatar ni nom) - neutre, voix Rosmaryn.
 * ═══════════════════════════════════════════════════════════════════ */

/* Opener - paragraphe italique léger en tête de single CPT */
.hd-opener {
  font-family: 'Cormorant Garamond', 'Lora', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-secondary);
  border-left: 2px solid var(--gold, #b8922f);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 0 0 1.6rem;
  max-width: 62ch;
}
body.light-mode .hd-opener {
  color: var(--text-secondary);
  border-left-color: rgba(139, 105, 20, 0.45);
}

/* Note - encadré pratique / question-clé / alerte */
.hd-note {
  display: block;
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--gold, #b8922f);
  border-radius: 0 4px 4px 0;
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.hd-note__header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}
.hd-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem; height: 1.4rem;
  font-size: 0.95rem;
  color: var(--gold, #b8922f);
  font-weight: 500;
  line-height: 1;
}
.hd-note__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold, #b8922f);
  font-weight: 600;
}
.hd-note__body {
  color: var(--text-primary);
}
.hd-note__body p:last-child { margin-bottom: 0; }
.hd-note__body em { color: var(--text-secondary); font-style: italic; }

/* Variantes */
.hd-note--question {
  border-left-color: var(--accent, #7b68ee);
  background: rgba(123, 104, 238, 0.05);
}
.hd-note--question .hd-note__icon,
.hd-note--question .hd-note__label {
  color: var(--accent, #7b68ee);
}
.hd-note--alert {
  border-left-color: #d98e4a;
  background: rgba(217, 142, 74, 0.06);
}
.hd-note--alert .hd-note__icon,
.hd-note--alert .hd-note__label {
  color: #d98e4a;
}

/* Mode jour */
body.light-mode .hd-note {
  background: rgba(139, 105, 20, 0.04);
  border-left-color: rgba(139, 105, 20, 0.55);
}
body.light-mode .hd-note__icon,
body.light-mode .hd-note__label {
  color: #8b6914;
}
body.light-mode .hd-note--question {
  background: rgba(91, 74, 208, 0.05);
  border-left-color: rgba(91, 74, 208, 0.5);
}
body.light-mode .hd-note--question .hd-note__icon,
body.light-mode .hd-note--question .hd-note__label {
  color: #5b4ad0;
}
body.light-mode .hd-note--alert {
  background: rgba(183, 102, 30, 0.06);
  border-left-color: rgba(183, 102, 30, 0.55);
}
body.light-mode .hd-note--alert .hd-note__icon,
body.light-mode .hd-note--alert .hd-note__label {
  color: #b7661e;
}

/* Responsive - resserrer sur mobile */
@media (max-width: 640px) {
  .hd-opener {
    font-size: 1.05rem;
    padding-left: 0.9rem;
  }
  .hd-note {
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
  }
}

/* Synthèse - aperçu cards 5 concepts (Free + Premium) */
.synthese-narrative {
  background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(123,104,238,0.05));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  margin: 0.75rem 0 1.5rem;
}
.synthese-narrative p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 0.8rem;
  color: var(--text-primary);
}
.synthese-narrative p:last-child { margin-bottom: 0; }
.synthese-narrative strong { color: var(--gold); font-weight: 600; }
body.light-mode .synthese-narrative strong { color: #7a5d12; }
@media (max-width: 600px) {
  .synthese-narrative { padding: 1.1rem 1rem; }
  .synthese-narrative p { font-size: 0.9rem; line-height: 1.6; }
}

.synthese-intro { color: var(--text-secondary); margin-bottom: 1.5rem; }
.synthese-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.synthese-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.1rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.synthese-card__label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-muted); font-weight: 600;
}
.synthese-card__title {
  font-family: 'Lora', serif; font-size: 1.1rem; font-weight: 600;
  color: var(--gold); text-decoration: none;
}
a.synthese-card__title:hover { text-decoration: underline; }
.synthese-card__blurb {
  font-size: 0.88rem; line-height: 1.4; color: var(--text-primary); margin: 0;
}
.synthese-card__cta {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: transparent;
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.synthese-card__cta:hover,
.synthese-card__cta:focus-visible {
  background: rgba(201,168,76,0.12);
  border-color: var(--gold);
  outline: none;
}
.synthese-card__cta--locked::before {
  content: '🔒 ';
  margin-right: 0.2rem;
}
body.light-mode .synthese-card { background: rgba(0,0,0,0.03); }
body.light-mode .synthese-card__title { color: #7a5d12; }

@media (max-width: 600px) {
  .synthese-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .synthese-card { padding: 0.95rem 0.85rem; }
  .synthese-card__title { font-size: 1.05rem; }
  .synthese-card__blurb { font-size: 0.85rem; }
}

/* ══════════════════════════════════════════════════════════════
   ONGLET VARIABLES - Mode jour + nuit
   ══════════════════════════════════════════════════════════════ */
.var-tab { padding: 0; }
.var-tab__title {
  font-size: 1.6rem;
  margin: 0 0 0.6rem;
  text-align: center;
}
.var-tab__intro {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Récap visuel des 4 flèches cliquables */
.var-tab__overview {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0.8rem;
  background: var(--bg-secondary);
  border-radius: 12px;
}
.var-tab__overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.18s, transform 0.15s;
  min-width: 90px;
}
.var-tab__overview-item:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.var-tab__overview-arrow { font-size: 1.4rem; line-height: 1; }
.var-tab__overview-item--design  .var-tab__overview-arrow { color: #e74c5e; }
.var-tab__overview-item--personality .var-tab__overview-arrow { color: var(--gold, #c9a85b); }
.var-tab__overview-label { font-size: 0.78rem; letter-spacing: 0.04em; }

/* Sections variable empilées */
.var-tab__section {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid #e74c5e;
}
.var-tab__section--personality {
  border-left-color: var(--text-primary);
}
.var-tab__section-title {
  margin: 0 0 0.8rem;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.var-tab__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.var-tab__meta li { white-space: nowrap; }
.var-tab__paragraph {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

/* Sub-attributs Premium */
.var-tab__sub {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255,255,255,0.1);
}
.var-tab__sub-attr {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 0.4rem;
}
.var-tab__sub-paragraph {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 0.6rem;
}

/* Bloc Pro recommandations */
.var-tab__pro-block {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: rgba(201, 168, 91, 0.06);
  border: 1px solid rgba(201, 168, 91, 0.18);
  border-radius: 10px;
}
.var-tab__pro-title {
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
  color: var(--gold, #c9a85b);
  letter-spacing: 0.02em;
}
.var-tab__pro-item {
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 0.5rem;
}
.var-tab__pro-item:last-child { margin-bottom: 0; }

/* Tableau Dépendantes/Indépendantes */
.var-tab__deps-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1rem;
  font-size: 0.88rem;
}
.var-tab__deps-table th,
.var-tab__deps-table td {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  vertical-align: top;
}
.var-tab__deps-table thead th {
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  font-weight: 600;
}
.var-tab__deps-config td {
  background: rgba(201, 168, 91, 0.08);
  font-weight: 500;
}
.var-tab__deps-note {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
}

/* Section déconditionnement */
.var-tab__deconditioning {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  background: var(--bg-secondary);
  border-radius: 14px;
  border-left: 4px solid var(--gold, #c9a85b);
}
.var-tab__deconditioning-steps {
  margin: 1rem 0 1rem 1.2rem;
  padding: 0;
}
.var-tab__deconditioning-steps li {
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.6;
}
.var-tab__deconditioning-note {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin: 0;
}

/* Pro extras */
.var-tab__pro-extras {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  background: var(--bg-secondary);
  border-radius: 14px;
}

/* Composite mode */
.var-tab__composite {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
  font-size: 1rem;
}

/* Mode jour */
body.light-mode .var-tab__overview { background: rgba(0,0,0,0.04); }
body.light-mode .var-tab__overview-item:hover { background: rgba(0,0,0,0.06); }
body.light-mode .var-tab__sub { border-top-color: rgba(0,0,0,0.1); }
body.light-mode .var-tab__deps-table th,
body.light-mode .var-tab__deps-table td { border-color: rgba(0,0,0,0.1); }
body.light-mode .var-tab__deps-table thead th { background: rgba(0,0,0,0.04); }

/* Responsive */
@media (max-width: 768px) {
  .var-tab__section { padding: 1.1rem 1rem; }
  .var-tab__deps-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .var-tab__overview { gap: 0.4rem; padding: 0.6rem; }
  .var-tab__overview-item { min-width: 70px; padding: 0.4rem 0.6rem; }
  .var-tab__overview-label { font-size: 0.7rem; }
}