/* ============================================================
JETONS DE COULEUR — SOURCE UNIQUE DE VÉRITÉ (v94.0.1)
------------------------------------------------------------
Le site n'a qu'un thème : clair. Toutes les couleurs passent
par ces jetons. Les six anciennes nomenclatures (--lx-, --ds-,
--nv-, --c36-, --r-, --grim-) n'en sont plus que des alias.
Changer une couleur du site = changer une ligne ici.
============================================================ */
:root{
/* Surfaces, du fond de page à la carte */
--t-paper: #FAF8F4;
--t-surface: #FFFFFF;
--t-surface-2: #F3EFE8;
--t-surface-3: #EAE4D9;
/* Encre
v94.8.0 audit 2.1 : --t-ink-55 mesurait 4.03:1 sur paper #FAF8F4, sous le
seuil AA de 4.5:1 pour tout texte < 18.7px. Il est utilisé en petits corps
(footer meta 13px, « / mois » des prix, labels JJ/MM/AAAA, dates reviews).
Remonté à 0.64 → ≈5.0:1. --t-ink-45 (2.97:1) remonté à 0.55 → ≈4.03:1,
réservé aux éléments non-textuels (filets, placeholders décoratifs). */
--t-ink: #16130E;
--t-ink-deep: #2A241A;
--t-ink-74: rgba(22, 19, 14, 0.74);
--t-ink-55: rgba(22, 19, 14, 0.64);
--t-ink-45: rgba(22, 19, 14, 0.55);
--t-ink-32: rgba(22, 19, 14, 0.32);
--t-ink-14: rgba(22, 19, 14, 0.14);
--t-ink-06: rgba(22, 19, 14, 0.06);
--t-ink-05: rgba(22, 19, 14, 0.05);
/* Or */
--t-gold: #8A6A2F;
--t-gold-light: #9C7A36;
--t-gold-deep: #6E521F;
--t-gold-alt: #8E6420;
--t-gold-60: rgba(138, 106, 47, 0.6);
--t-gold-35: rgba(138, 106, 47, 0.35);
/* Encre et or utilisés par les règles de composants */
--t-ink-strong: #1A1712;
--t-gold-bright: #C9A24C;
--t-gold-hover: #B8913E;
--t-on-gold: #14181F;
/* Éléments — recalibrés pour le fond crème (WCAG AA, ratio >= 4.5) */
--t-el-feu: #B34A18;
--t-el-terre: #4A6A2E;
--t-el-air: #806A0E;
--t-el-eau: #2F5C99;
/* Accent */
--t-rose: #A4485E;
}
/* ============================================================
STEPHANE ASTRO · REFONTE v92.5.0
============================================================
Direction artistique v5 appliquée globalement sur toutes les
pages du site (sauf index.html qui a ses styles inline).
Injecte : styles complets de la nav v5 et du footer v5,
plus les overrides de palette + tokens du site legacy.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root {
--r-bg-0: #0A0A0A;
--r-bg-1: #131313;
--r-bg-2: #1B1B1B;
--r-bg-3: #242424;
--r-fg: #F0EDE7;
--r-fg-dim: rgba(240, 237, 231, 0.72);
--r-fg-mute: rgba(240, 237, 231, 0.48);
--r-fg-line: rgba(240, 237, 231, 0.14);
--r-fg-line-strong: rgba(240, 237, 231, 0.30);
--r-gold-bright: #F4D58A;
--r-gold: #E4C07E;
--r-gold-deep: #C8A25C;
--r-macro: 'Archivo Black', 'Neue Haas Grotesk', system-ui, sans-serif;
--r-serif: 'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif;
--r-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
--r-mono: 'IBM Plex Mono', ui-monospace, monospace;
--r-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--r-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--r-dur-fast: 180ms;
--r-dur-med: 360ms;
--r-gutter: clamp(20px, 5vw, 64px);
--r-safe-top: env(safe-area-inset-top, 0px);
--r-safe-bottom: env(safe-area-inset-bottom, 0px);
--ds-night: #0A0A0A;
--ds-night-soft: #131313;
--ds-night-elev: #1B1B1B;
--ds-text: #F0EDE7;
--ds-text-dim: rgba(240, 237, 231, 0.72);
--ds-text-mute: rgba(240, 237, 231, 0.48);
--ds-cream: #F0EDE7;
--ds-cream-deep: #E8DFCB;
--ds-line: rgba(240, 237, 231, 0.14);
--ds-line-strong: rgba(240, 237, 231, 0.30);
--ds-serif: 'Fraunces', serif;
--ds-sans: 'Hanken Grotesk', sans-serif;
--ds-mono: 'IBM Plex Mono', monospace;
--navy-deep: #0A0A0A;
--cream: #F0EDE7;
--cream-faint: rgba(240, 237, 231, 0.72);
--gold-strong: #F4D58A;
--gold: #E4C07E;
--gold-soft: #C8A25C;
--gold-deep: #C8A25C;
--font-serif: 'Fraunces', serif;
--font-serif-display: 'Fraunces', serif;
--font-body: 'Hanken Grotesk', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
}
/* ============================================================
v93.3.0 · THÈME CLAIR · html[data-theme="light"]
============================================================
Bascule complète des trois nomenclatures (--r-*, --ds-*, legacy)
pour que tout composant qui référence l'une des trois se
retrouve automatiquement en clair.
L'or var(--r-gold) est illisible sur blanc (~1.9:1) : les valeurs
texte (--r-gold, --ds-cream-deep alors utilisé en accent, etc.)
sont assombries. L'or original reste autorisé UNIQUEMENT en
décoratif large (fonds de boutons, filets), jamais texte.
Interdictions respectées :
• pas de filter: invert
• aucun hex hors du bloc de tokens ci-dessous
• le sombre existant reste identique quand data-theme absent
============================================================ */
html[data-theme="light"] {
/* Nomenclature v-refonte (source de vérité) */
--r-bg-0: var(--t-paper);
--r-bg-1: var(--t-surface);
--r-bg-2: var(--t-surface-2);
--r-bg-3: var(--t-surface-3);
--r-fg: var(--t-ink);
--r-fg-dim: var(--t-ink-74);
--r-fg-mute: var(--t-ink-55);
--r-fg-line: var(--t-ink-14);
--r-fg-line-strong: var(--t-ink-32);
/* v94.8.0 audit 2.2 : en light, --r-gold-bright servait à éclaircir au hover
(#9C7A36 → 3.77:1 sur paper, le CTA principal passait SOUS le seuil AA au
survol). En thème clair on fonce au hover au lieu d'éclaircir : la variable
« bright » est remappée sur l'or profond. Le sombre n'est pas touché. */
--r-gold-bright: var(--t-gold-deep);
--r-gold: var(--t-gold);
--r-gold-deep: var(--t-gold-deep);
/* Nomenclature ds-* (design system) */
--ds-night: var(--t-paper);
--ds-night-soft: var(--t-surface);
--ds-night-elev: var(--t-surface-2);
--ds-text: var(--t-ink);
--ds-text-dim: var(--t-ink-74);
--ds-text-mute: var(--t-ink-55);
--ds-cream: var(--t-ink);
--ds-cream-deep: var(--t-ink-deep);
--ds-line: var(--t-ink-14);
--ds-line-strong: var(--t-ink-32);
/* Nomenclature legacy */
--navy-deep: var(--t-paper);
--cream: var(--t-ink);
--cream-faint: var(--t-ink-74);
--gold-strong: var(--t-gold-light);
--gold: var(--t-gold);
--gold-soft: var(--t-gold-deep);
--gold-deep: var(--t-gold-deep);
/* Nomenclature inline home index.html (4e système) */
--bg-0: var(--t-paper);
--bg-1: var(--t-surface);
--bg-2: var(--t-surface-2);
--bg-3: var(--t-surface-3);
--fg: var(--t-ink);
--fg-dim: var(--t-ink-74);
--fg-mute: var(--t-ink-55);
--fg-line: var(--t-ink-14);
--fg-line-strong: var(--t-ink-32);
}
/* Vidéos sur fond clair : encadrer proprement (audit § vigilance 1).
Les vidéos hero et jupiter sont conçues noires, on ne les invert pas :
on les cadre pour qu'elles ne flottent pas comme des trous noirs. */
html[data-theme="light"] video {
border: 1px solid var(--r-fg-line);
border-radius: 6px;
overflow: hidden;
background: #0A0A0A; /* fallback quand poster absent */
}
/* box-shadow : les ombres pensées pour le noir (opacités 0.3-0.55)
sont trop dures sur blanc. On divise par ~2 en light. */
html[data-theme="light"] {
--r-shadow-sm: 0 2px 8px var(--t-ink-06);
--r-shadow-md: 0 6px 20px rgba(22, 19, 14, 0.08);
--r-shadow-lg: 0 12px 40px rgba(22, 19, 14, 0.12);
}
/* Neutralisation du noise-overlay body::after qui, en mix-blend overlay,
assombrit tout sur clair. */
html[data-theme="light"] body::after {
opacity: 0.025;
mix-blend-mode: multiply;
}
/* ============================================================
SURFACES SCOPÉES · Étape 2 audit fond blanc
============================================================
Deux classes utilitaires qui redéfinissent LOCALEMENT tous les
tokens de texte. Un composant enfant hérite automatiquement des
bons tokens sans une seule règle spécifique.
Usage typique sur la home :
• hero : .surface-dark (vidéo noire, texte crème)
• sections cartes / pricing / approche / footer : .surface-light
• cartes témoignages : .surface-dark comme respiration visuelle
============================================================ */
.surface-dark {
background: #0A0A0A;
color: #F0EDE7;
/* Nomenclature v-refonte */
--r-bg-0: #0A0A0A;
--r-bg-1: #131313;
--r-bg-2: #1B1B1B;
--r-bg-3: #242424;
--r-fg: #F0EDE7;
--r-fg-dim: rgba(240, 237, 231, 0.72);
--r-fg-mute: rgba(240, 237, 231, 0.55);
--r-fg-line: rgba(240, 237, 231, 0.14);
--r-fg-line-strong: rgba(240, 237, 231, 0.30);
--r-gold: #E4C07E;
--r-gold-bright: #F4D58A;
--r-gold-deep: #C8A25C;
/* Aliases legacy */
--navy-deep: #0A0A0A;
--cream: #F0EDE7;
--cream-faint: rgba(240, 237, 231, 0.72);
--gold: #E4C07E;
--gold-strong: #F4D58A;
--gold-soft: #C8A25C;
--gold-deep: #C8A25C;
/* Aliases ds-* */
--ds-night: #0A0A0A;
--ds-night-soft: #131313;
--ds-night-elev: #1B1B1B;
--ds-text: #F0EDE7;
--ds-text-dim: rgba(240, 237, 231, 0.72);
--ds-text-mute: rgba(240, 237, 231, 0.55);
--ds-cream: #F0EDE7;
--ds-line: rgba(240, 237, 231, 0.14);
--ds-line-strong: rgba(240, 237, 231, 0.30);
/* Nomenclature inline home (4e système, sans préfixe --r) —
ESSENTIEL pour hero-lead, palazzo-lead, approche-v6-lead, etc.
qui référencent var(--fg-dim) et non var(--r-fg-dim). */
--bg-0: #0A0A0A;
--bg-1: #131313;
--bg-2: #1B1B1B;
--bg-3: #242424;
--fg: #F0EDE7;
--fg-dim: rgba(240, 237, 231, 0.72);
--fg-mute: rgba(240, 237, 231, 0.55);
--fg-line: rgba(240, 237, 231, 0.14);
--fg-line-strong: rgba(240, 237, 231, 0.30);
}
.surface-light {
background: var(--r-bg-0);
color: var(--r-fg);
}
/* Sur fond clair, chaque .surface-dark reste un îlot sombre.
On lui donne un ombrage doux pour la démarquer du blanc cassé. */
html[data-theme="light"] .surface-dark {
box-shadow: 0 8px 32px rgba(22, 19, 14, 0.10);
}
/* ============================================================
v94.8.0 audit 2.2 · Or de texte sur surfaces élevées
============================================================
--t-gold #8A6A2F mesure 4.73:1 sur paper (passe de justesse) mais
seulement 4.38:1 sur --t-surface-2 #F3EFE8 (échec AA). Sur toute
surface élevée en thème clair, l'or de TEXTE bascule sur l'or
profond #6E521F (6.85:1 sur paper, 6.3:1 sur surface-2).
Les fonds de boutons or ne sont pas concernés (l'or reste décoratif
large, seul le texte dessus est en encre).
============================================================ */
html[data-theme="light"] .tarif--featured,
html[data-theme="light"] .tarif--featured *,
html[data-theme="light"] [style*="background: var(--r-bg-1)"] em,
html[data-theme="light"] [style*="background: var(--r-bg-2)"] em {
--r-gold: var(--t-gold-deep);
--gold: var(--t-gold-deep);
}
/* Les fonds or pleins gardent l'or vif : c'est du décoratif large,
le texte dessus est en encre #0A0A0A (contraste 8.9:1). */
html[data-theme="light"] .tarif-cta--gold,
html[data-theme="light"] .celeb-sticky-cta a,
html[data-theme="light"] .celeb-relais-actions .btn-gold {
--r-gold: var(--t-gold);
background: var(--t-gold);
color: #16130E;
}
html[data-theme="light"] .tarif-cta--gold:hover,
html[data-theme="light"] .celeb-sticky-cta a:hover,
html[data-theme="light"] .celeb-relais-actions .btn-gold:hover {
background: var(--t-gold-deep);
color: #FAF8F4;
}
/* ============================================================
Corrections ciblées itération 2
============================================================ */
/* Header .v5-nav : le rgba(10,10,10,0.86) hardcodé donne un gris
#2C2C2B en light theme. En light, on passe sur fond clair
translucide avec backdrop-filter (fonctionne sur les deux thèmes). */
html[data-theme="light"] .v5-nav {
background: color-mix(in srgb, var(--t-paper) 88%, transparent);
border-bottom: 1px solid var(--r-fg-line);
}
/* Fallback si color-mix pas supporté (safari < 16.2) */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
html[data-theme="light"] .v5-nav {
background: rgba(250, 248, 244, 0.88);
}
}
/* Idem pour le sheet mobile de nav */
html[data-theme="light"] .v5-nav-sheet {
background: var(--r-bg-0);
color: var(--r-fg);
}
/* Liens de nav en light */
html[data-theme="light"] .v5-nav-links a,
html[data-theme="light"] .v5-nav-links button {
color: var(--r-fg);
}
/* Cartes témoignages : sur fond clair, on les fait en .surface-dark
automatique (élégant, respiration visuelle). Le sélecteur .testi-card
est celui utilisé sur la home, on couvre aussi google-review-card. */
html[data-theme="light"] .testi-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .google-review-card,
html[data-theme="light"] .approche-v6 .approche-card,
html[data-theme="light"] .review-card {
background: #0A0A0A;
color: #F0EDE7;
--r-fg: #F0EDE7;
--r-fg-dim: rgba(240, 237, 231, 0.72);
--r-fg-mute: rgba(240, 237, 231, 0.55);
--r-fg-line: rgba(240, 237, 231, 0.14);
--r-gold: #E4C07E;
--r-gold-deep: #C8A25C;
--fg: #F0EDE7;
--fg-dim: rgba(240, 237, 231, 0.72);
--fg-mute: rgba(240, 237, 231, 0.55);
--cream: #F0EDE7;
--gold: #E4C07E;
--gold-deep: #C8A25C;
--ds-text: #F0EDE7;
--ds-cream: #F0EDE7;
}
html { background: var(--r-bg-0); }
body {
background: var(--r-bg-0);
color: var(--r-fg);
font-family: var(--r-sans);
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
opacity: 0.055;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* Masquer les vieux éléments (au cas où le script ne les a pas tous supprimés) */
.site-nav, .navbar, .nav-mobile-panel, .sgm, .sgm-burger, .sgm-overlay {
display: none !important;
}
.site-footer:not(.v5-footer) { display: none !important; }
/* ============================================================
NAV V5 · classes préfixées .v5-*
============================================================ */
.v5-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(10, 10, 10, 0.86);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid var(--r-fg-line);
padding-top: var(--r-safe-top);
}
.v5-nav *, .v5-nav-sheet *, .v5-footer * { box-sizing: border-box; }
.v5-nav-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--r-gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: 64px;
}
.v5-brand-lockup {
display: inline-flex;
align-items: baseline;
gap: 0;
text-decoration: none;
line-height: 1;
font-size: clamp(1.05rem, 1.6vw, 1.4rem);
padding: 8px 0;
flex-shrink: 0;
color: var(--r-fg);
}
.v5-brand-name {
font-family: var(--r-serif);
font-style: italic;
font-weight: 300;
color: var(--r-fg);
letter-spacing: -0.005em;
font-size: 1em;
}
.v5-brand-sep {
display: inline-block;
width: 1px;
height: 0.82em;
margin: 0 0.24em;
background: linear-gradient(180deg, var(--r-gold-bright) 0%, var(--r-gold) 50%, var(--r-gold-deep) 100%);
align-self: center;
transform: translateY(0.04em);
}
.v5-brand-astro {
font-family: var(--r-serif);
font-style: normal;
font-weight: 500;
font-size: 1em;
letter-spacing: 0.05em;
text-transform: uppercase;
background: linear-gradient(180deg, var(--r-gold-bright) 0%, var(--r-gold) 50%, var(--r-gold-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.v5-nav-links {
display: none;
gap: 32px;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.v5-nav-links > li { position: relative; }
.v5-nav-links a,
.v5-nav-links button {
position: relative;
font-family: var(--r-sans);
font-size: 15px;
font-weight: 400;
color: var(--r-fg-dim);
padding: 8px 0;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--r-dur-fast) var(--r-ease-out);
background: transparent;
border: none;
cursor: pointer;
text-decoration: none;
}
.v5-nav-links a::after,
.v5-nav-links button::after {
content: '';
position: absolute;
left: 0;
bottom: 6px;
height: 1px;
width: 100%;
background: var(--r-fg);
transform-origin: left;
transform: scaleX(0);
transition: transform var(--r-dur-med) var(--r-ease-out);
}
.v5-nav-links a:hover,
.v5-nav-links button:hover { color: var(--r-fg); }
.v5-nav-links a:hover::after,
.v5-nav-links button:hover::after { transform: scaleX(1); }
.v5-nav-links .v5-has-sub > button::before {
content: '';
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
margin-right: 4px;
transform: translateY(1px);
}
.v5-nav-links .v5-has-sub::after {
content: '';
position: absolute;
top: 100%;
left: -16px;
right: -16px;
height: 14px;
z-index: 55;
opacity: 0;
pointer-events: none;
}
.v5-nav-links .v5-has-sub:hover::after,
.v5-nav-links .v5-has-sub:focus-within::after,
.v5-nav-links .v5-has-sub.is-open::after {
opacity: 1;
pointer-events: auto;
}
.v5-nav-submenu {
position: absolute;
top: calc(100% + 14px);
left: -16px;
min-width: 280px;
background: var(--r-bg-1);
border: 1px solid var(--r-fg-line-strong);
padding: 10px 0;
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity var(--r-dur-med) var(--r-ease-out),
transform var(--r-dur-med) var(--r-ease-out);
z-index: 60;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.v5-nav-links .v5-has-sub:hover .v5-nav-submenu,
.v5-nav-links .v5-has-sub:focus-within .v5-nav-submenu,
.v5-nav-links .v5-has-sub.is-open .v5-nav-submenu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.v5-nav-submenu a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
font-family: var(--r-sans);
font-size: 14px;
color: var(--r-fg-dim);
min-height: 44px;
text-decoration: none;
transition: background var(--r-dur-fast), color var(--r-dur-fast);
}
.v5-nav-submenu a::after { display: none; }
.v5-nav-submenu a:hover {
background: var(--r-bg-2);
color: var(--r-fg);
}
.v5-nav-submenu a small {
font-family: var(--r-mono);
font-size: 10px;
color: var(--r-fg-mute);
letter-spacing: 0.08em;
}
.v5-nav-cta {
display: none;
position: relative;
align-items: center;
gap: 10px;
padding: 12px 22px;
font-family: var(--r-sans);
font-size: 14px;
font-weight: 500;
min-height: 44px;
color: var(--r-fg);
border: 1px solid var(--r-fg-line-strong);
background: transparent;
overflow: hidden;
z-index: 0;
transition: color var(--r-dur-fast) var(--r-ease-out);
text-decoration: none;
}
.v5-nav-cta::before {
content: '';
position: absolute;
inset: 0;
background: var(--r-fg);
transform-origin: left;
transform: scaleX(0);
transition: transform var(--r-dur-med) var(--r-ease-out);
z-index: -1;
}
.v5-nav-cta:hover { color: var(--r-bg-0); }
.v5-nav-cta:hover::before { transform: scaleX(1); }
.v5-nav-burger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent;
border: none;
cursor: pointer;
color: var(--r-fg);
}
.v5-nav-burger-lines {
display: block;
width: 22px;
height: 14px;
position: relative;
}
.v5-nav-burger-lines::before,
.v5-nav-burger-lines::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 1.5px;
background: var(--r-fg);
}
.v5-nav-burger-lines::before { top: 0; }
.v5-nav-burger-lines::after { bottom: 0; }
.v5-nav-sheet {
position: fixed;
inset: 0;
z-index: 100;
background: var(--r-bg-0);
display: flex;
flex-direction: column;
padding: max(var(--r-safe-top), 20px) var(--r-gutter) calc(var(--r-safe-bottom) + 24px);
transform: translateY(-100%);
transition: transform var(--r-dur-med) var(--r-ease-out);
visibility: hidden;
overflow-y: auto;
}
.v5-nav-sheet.is-open { transform: translateY(0); visibility: visible; }
.v5-nav-sheet-head {
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
margin-bottom: 32px;
}
.v5-nav-sheet-close {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
background: transparent;
border: none;
color: var(--r-fg);
cursor: pointer;
}
.v5-nav-sheet-links {
display: flex;
flex-direction: column;
flex: 1;
gap: 0;
}
.v5-nav-sheet-item { border-bottom: 1px solid var(--r-fg-line); }
.v5-nav-sheet-item > a,
.v5-nav-sheet-item > summary {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--r-macro);
font-size: clamp(1.6rem, 6vw, 2.4rem);
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
padding: 22px 0;
min-height: 56px;
color: var(--r-fg);
list-style: none;
cursor: pointer;
text-decoration: none;
}
.v5-nav-sheet-item > summary::-webkit-details-marker { display: none; }
.v5-nav-sheet-item > summary::after {
content: '＋';
font-family: var(--r-sans);
font-size: 22px;
font-weight: 300;
color: var(--r-fg-mute);
}
.v5-nav-sheet-item[open] > summary::after { content: '−'; }
.v5-nav-sheet-sub {
padding: 4px 0 20px;
display: grid;
gap: 4px;
}
.v5-nav-sheet-sub a {
display: block;
font-family: var(--r-sans);
font-weight: 400;
font-size: 17px;
color: var(--r-fg-dim);
padding: 12px 0;
min-height: 44px;
text-decoration: none;
}
.v5-nav-sheet-cta {
margin-top: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px 24px;
background: var(--r-fg);
color: var(--r-bg-0);
font-family: var(--r-sans);
font-weight: 500;
font-size: 16px;
min-height: 56px;
text-decoration: none;
}
@media (min-width: 1024px) {
.v5-nav-links { display: flex; }
.v5-nav-cta { display: inline-flex; }
.v5-nav-burger { display: none; }
}
/* ============================================================
FOOTER V5
============================================================ */
.v5-footer {
border-top: 1px solid var(--r-fg-line);
padding: 72px var(--r-gutter) calc(32px + var(--r-safe-bottom));
background: var(--r-bg-0);
}
.v5-footer-inner { max-width: 1440px; margin: 0 auto; }
.v5-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
margin-bottom: 60px;
}
.v5-footer-brand-block {
display: flex;
flex-direction: column;
gap: 16px;
}
.v5-footer-tagline {
font-family: var(--r-sans);
font-weight: 300;
font-size: 15px;
line-height: 1.55;
color: var(--r-fg-dim);
max-width: 42ch;
}
.v5-footer-tagline em {
font-family: var(--r-serif);
font-style: italic;
color: var(--r-fg);
}
.v5-footer-meta {
font-family: var(--r-serif);
font-style: italic;
font-weight: 300;
font-size: 13px;
color: var(--r-fg-mute);
}
.v5-footer-instagram {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
padding: 10px 16px;
border: 1px solid var(--r-fg-line-strong);
font-family: var(--r-sans);
font-weight: 500;
font-size: 13px;
color: var(--r-fg);
min-height: 44px;
background: transparent;
text-decoration: none;
transition: border-color var(--r-dur-fast), background var(--r-dur-fast);
}
.v5-footer-instagram:hover {
border-color: var(--r-fg);
background: var(--r-bg-2);
}
.v5-footer-instagram svg { width: 18px; height: 18px; stroke: currentColor; }
.v5-footer-col h4 {
font-family: var(--r-macro);
font-weight: 400;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--r-fg);
margin-bottom: 18px;
}
.v5-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.v5-footer-col a {
font-family: var(--r-sans);
font-weight: 300;
font-size: 14px;
color: var(--r-fg-dim);
min-height: 32px;
display: inline-flex;
align-items: center;
text-decoration: none;
transition: color var(--r-dur-fast);
}
.v5-footer-col a:hover { color: var(--r-fg); }
.v5-footer-bottom {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding-top: 32px;
border-top: 1px solid var(--r-fg-line);
font-family: var(--r-sans);
font-weight: 300;
font-size: 13px;
color: var(--r-fg-mute);
}
.v5-footer-bottom-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.v5-footer-bottom-legal a {
/* v94.8.0 audit 2.5 : min-height 24px re-déclarée ici écrasait la règle
44px globale du footer (mentions légales, confidentialité, CGV). */
color: var(--r-fg-dim);
text-decoration: none;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.v5-footer-bottom-legal a:hover { color: var(--r-fg); }
.v5-footer-bottom-signature {
font-family: var(--r-serif);
font-style: italic;
font-weight: 300;
color: var(--r-fg-mute);
}
@media (min-width: 768px) and (max-width: 1023px) {
.v5-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 56px; }
}
@media (min-width: 1024px) {
.v5-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; }
.v5-footer-bottom {
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.v5-footer-bottom-legal { justify-content: center; }
.v5-footer-bottom-signature { text-align: right; }
}
/* ============================================================
Overrides existants du site
============================================================ */
.btn, .btn-primary, .hv-cta, .tfc-cta {
border-radius: 0 !important;
font-family: var(--r-sans) !important;
font-weight: 500 !important;
}
.btn-primary, .hv-cta {
background: var(--r-fg) !important;
color: var(--r-bg-0) !important;
border: none !important;
}
.btn-primary:hover, .hv-cta:hover { opacity: 0.9 !important; }
.btn-secondary, .btn-ghost, .hv-ghost {
background: transparent !important;
color: var(--r-fg) !important;
border: 1px solid var(--r-fg-line-strong) !important;
border-radius: 0 !important;
}
.liquid-glass, .liquid-glass-card {
background: var(--r-bg-1) !important;
border: 1px solid var(--r-fg-line) !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
.cap-card {
background: var(--r-bg-1) !important;
border: 1px solid var(--r-fg-line) !important;
border-radius: 0 !important;
color: var(--r-fg) !important;
}
.cap-card-title, .sec-heading, .hero-h1, .cn-hero-mega {
font-family: var(--r-macro) !important;
color: var(--r-fg) !important;
text-transform: uppercase !important;
letter-spacing: -0.025em !important;
}
.cap-card-title em, .sec-heading em, .hero-h1 em, .cn-hero-mega em {
font-family: var(--r-serif) !important;
font-style: italic !important;
font-weight: 300 !important;
color: var(--r-fg-dim) !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
}
.cap-card-body, .hero-sub, .sec-lead {
font-family: var(--r-sans) !important;
color: var(--r-fg-dim) !important;
font-weight: 300 !important;
}
section.fullscreen { background: var(--r-bg-0) !important; }
.section-veil {
background: linear-gradient(180deg, rgba(10,10,10,0.20) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.75) 100%) !important;
}
.theme-form-card, .tfc {
background: var(--r-bg-1) !important;
border: 1px solid var(--r-fg-line-strong) !important;
border-radius: 0 !important;
color: var(--r-fg) !important;
}
.tfc-field input, .tfc-field select,
input[type="date"], input[type="time"], input[type="text"], input[type="email"] {
background: var(--r-bg-0) !important;
color: var(--r-fg) !important;
border: 1px solid var(--r-fg-line-strong) !important;
border-radius: 0 !important;
font-family: var(--r-sans) !important;
}
.tfc-field input:focus, input:focus {
outline: 1px solid var(--r-gold) !important;
outline-offset: 2px !important;
border-color: var(--r-gold) !important;
}
a { color: var(--r-fg); }
a:hover { color: var(--r-gold); }
h1, h2, h3, h4 { color: var(--r-fg); }
/* ============================================================
FIX v92.5.4 · Position fixed pour v5-nav sur pages internes
============================================================
La règle sticky de la nav v5 peut être cassée par un ancêtre
avec overflow:hidden sur certaines pages du site (mon-theme,
packs, grimoire etc ont des overflow:hidden inline).
La position fixed contourne le problème.
Le padding-top sur body compense la hauteur de la nav fixe.
============================================================ */
.v5-nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
width: 100% !important;
}
/* v94.8.0 audit 3.1 · BUG NOTCH IPHONE
Le viewport est en viewport-fit=cover et .v5-nav a un padding-top de
var(--r-safe-top) : la nav mesure donc 64px + env(safe-area-inset-top)
(≈47-59px sur iPhone à encoche). Le body ne compensait que 64px →
les ~50 premiers pixels de contenu (hero, h1) passaient SOUS la nav
sur tous les iPhones récents, sur l'ensemble du site. */
body {
padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
}
/* Le mode 3D gère sa propre compensation (margin-top inline) : sans cette
exception l'offset était cumulé → 64px de vide en haut et bas tronqué. */
body.page-three-3d {
padding-top: 0 !important;
}
/* Sheet mobile déjà en fixed inset:0, garde son z-index plus élevé */
.v5-nav-sheet {
z-index: 1100 !important;
padding-top: max(var(--r-safe-top), 20px) !important;
}
/* ============================================================
FIX v92.5.7 - Calendly widget height
============================================================
Sans min-height explicite, l'iframe Calendly n'affiche que
son en-tete. Force une hauteur suffisante pour afficher le
calendrier complet et la colonne de creneaux.
============================================================ */
.calendly-inline-widget {
min-width: 320px !important;
min-height: 720px !important;
height: 720px !important;
width: 100% !important;
border-radius: 0 !important;
background: var(--r-bg-1) !important;
}
@media (max-width: 768px) {
.calendly-inline-widget {
/* v92.6.0 - Calendly en mode stacked mobile a besoin de plus d'espace
(calendrier + liste de creneaux empiles verticalement) */
min-height: 1100px !important;
height: 1100px !important;
}
}
@media (max-width: 480px) {
.calendly-inline-widget {
min-height: 1200px !important;
height: 1200px !important;
}
}
/* ============================================================
FIX v92.6.1 - Calendly iframe height
============================================================
Le script widget.js Calendly resize l'iframe selon le style
inline height du DIV parent. Mais pour garantir que l'iframe
remplit toujours son container, on force explicitement.
============================================================ */
.calendly-inline-widget iframe {
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
border: 0 !important;
display: block !important;
}
.calendly-inline-widget {
overflow: visible !important;
}
/* ============================================================
FIX v92.6.3 - Reset padding-left body (heritage v78.39 sidebar)
============================================================
v78.css line 3001 : @media (min-width: 1101px) { body { padding-left: 320px } }
Ce padding etait la pour laisser la place a un side-menu de 320px qui
n'existe plus dans la refonte V5. Sans override, tout le contenu
est decale de 320px vers la droite sur desktop >1100px.
============================================================ */
body {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* .side-menu est aussi masque par si un vestige HTML existait */
.side-menu { display: none !important; }
/* Le .site-nav ancien etait masque en desktop par v78.39 - on garde masque
car le v5-nav est actif */
/* ============================================================
v92.8.0 - Fixes audit-promo
============================================================ */
/* #13 - Hero packs.html centre */
.cn-hero .cn-sec-heading,
.cn-hero .cn-sec-heading--hero {
text-align: center !important;
}
/* #44 - Elements 0-height fantomes packs */
section:empty,
section > .container:empty {
display: none !important;
}
/* #42 - Section notre approche : reduire padding-bottom si trop de vide */
.approche-v6 {
padding-bottom: clamp(60px, 8vw, 100px) !important;
}
/* #37 - Sticky pricing safe-area iOS
v94.8.0 audit 3.6 : env(safe-area-inset-bottom, 0) seul donnait 0px de
padding sur tout device sans encoche (Android, iPhone SE) → le CTA collait
au bord de l'écran. max() garantit un plancher de 10px partout. */
.sg-sticky-pricing,
[data-sticky-pricing] .sticky-pricing-bar {
padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
bottom: 0 !important;
}
/* v94.8.0 audit 3.6 · Hit-zone et lisibilité de la barre sticky pricing.
Le CTA mesurait ~30px de haut (< 44px WCAG 2.5.8) et le label 8,8px. */
.sg-sticky-pricing-cta {
min-height: 44px !important;
padding: 12px 18px !important;
font-size: 0.75rem !important;
}
.sg-sticky-pricing-label {
font-size: 0.68rem !important;
letter-spacing: 0.12em !important;
}
/* v94.8.0 audit 3.3 · La barre sticky (z-index 9000) entrait en collision
avec la bannière cookies (même z-index, même bord bas). On la fait passer
dessous et on la masque tant que le consentement n'est pas donné. */
.sg-sticky-pricing {
z-index: 8000 !important;
}
@supports selector(body:has(*)) {
body:has(#sg-cookie-banner) .sg-sticky-pricing {
display: none !important;
}
}
/* #38 - Gap 296px avant formulaire mon-theme reduit */
main .form-container,
.mon-theme-form,
form.calc-form {
padding-top: clamp(24px, 4vw, 48px) !important;
}
/* #39 - Bouton retour 3D touch target 44px minimum */
.three-back,
.three-back-overlay {
min-height: 44px !important;
min-width: 44px !important;
padding: 12px 16px !important;
}
/* #40 - Landscape 3D : label Retour maintenu */
@media (max-width: 860px) and (orientation: landscape) {
body.page-three-3d .three-back-overlay-label {
display: inline !important;
}
}
/* #14 - Palazzo hero portrait max-width */
.pr-hero-portrait,
.palazzo-hero-portrait,
.palazzo-portrait {
max-width: calc(100vw - 64px) !important;
height: auto !important;
}
/* #15 - Palazzo hero titre reduire clamp si trop grand */
.palazzo-hero h1,
.pr-hero-title {
font-size: clamp(2.4rem, 6vw, 5rem) !important;
line-height: 1.05 !important;
}
/* #16 - Nav CTA "Creer un compte" masque si loggue (via body.is-authed) */
body.is-authed .v5-nav-cta,
body.is-authed .nav-cta,
body.is-authed .v5-nav-sheet-cta {
display: none !important;
}
/* #43 - Google Reviews grid 2x2 desktop garanti (etait 1x2) */
@media (min-width: 900px) {
.approche-v6 .gr-grid {
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: auto auto !important;
}
}
/* #17 - focus-visible global (fait aussi par agent 2 mais on renforce) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--r-gold) !important;
outline-offset: 2px !important;
border-radius: 0 !important;
}
/* Enlever outline default (pris en charge par :focus-visible) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
outline: none;
}
/* #18 - Bouton back-to-top illisible sur packs.html */
.back-to-top,
.btn-scrolltop,
[data-scrolltop] {
color: var(--r-fg) !important;
background: var(--fg-line) !important;
border: 1px solid rgba(228, 192, 126, 0.35) !important;
}
/* #19 - CTA "Laisser un avis Google" contraste 1.02:1 -> gold */
.gr-cta-link,
a.gr-cta-link {
color: var(--r-gold) !important;
font-weight: 500 !important;
}
/* #20 - Bouton "Supprimer mon compte" + legal Palazzo */
.btn-danger,
button.btn-danger {
color: #FF7A7A !important;
background: rgba(255, 122, 122, 0.06) !important;
border: 1px solid rgba(255, 122, 122, 0.35) !important;
}
.pr-price-legal,
p.pr-price-legal {
color: var(--r-fg-dim) !important;
}
/* #21 - Symboles planetes Sabian illisibles */
.sabian-card-sym,
.mon-theme-sabian-glyph {
color: var(--r-gold) !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* #35 - Touch targets footer */
.v5-footer a,
.footer-links a,
footer a {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 4px 0;
}
/* v92.8.0 - Menu Outils groupe (Individuel / A deux / Timing) */
.v5-nav-submenu-group {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(228, 192, 126, 0.55);
margin: 12px 0 4px;
padding: 0 16px;
font-weight: 400;
}
.v5-nav-submenu-group:first-child { margin-top: 0; }
/* v92.8.0 · #31 · Footer col label (ex-h4 déclassé en pour éviter skip h2→h4) */
.footer-col-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--r-fg-mute);
margin: 0 0 16px;
}
/* v92.8.0 · #36 · Checkbox custom : hitzone étendue à 44×44 (a11y touch target) */
.checkbox-wrap,
.form-checkbox-wrap,
.checkbox-visual-wrap,
label:has(input[type="checkbox"]) {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
cursor: pointer;
padding: 8px 4px;
}
/* ================================================================
* v92.8.0 · Audit promo · Radius zero, spacing mobile, eyebrow declass
* Ne pas déplacer avant la fin du fichier (append seulement).
* ================================================================ */
/* v92.8.0 · #29 Radius zero global (DS V5) — preserve avatars ronds et badges circulaires.
* On cible les catégories d'élément qui portent le plus de radius accidentel dans le legacy
* plutôt que de spammer * !important (qui casse widgets tiers, popovers, ombres animées). */
button:not([class*="avatar"]):not(.pill):not(.chip),
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.card,
[class*="card"]:not([class*="avatar"]):not([class*="celeb-card-photo"]):not([class*="celeb-card-signs"]),
.panel,
[class*="panel"]:not([class*="avatar"]),
.badge:not([class*="avatar"]):not(.celeb-badge):not(.zodiac-circle):not(.badge-round):not(.circular),
[class*="btn"]:not([class*="avatar"]):not([class*="round"]):not([class*="circle"]),
[class*="cta"]:not([class*="avatar"]):not([class*="round"]):not([class*="circle"]),
[class*="tag"]:not([class*="avatar"]),
[class*="chip"]:not([class*="avatar"]):not([class*="round"]):not([class*="circle"]),
[class*="pill"]:not([class*="avatar"]):not([class*="round"]):not([class*="circle"]),
[class*="tile"]:not([class*="avatar"]),
[class*="frame"]:not([class*="avatar"]),
[class*="box"]:not([class*="avatar"]) {
border-radius: 0 !important;
}
.avatar,
.gr-avatar,
.celeb-avatar,
[class*="avatar"],
.zodiac-circle,
.badge-round,
.circular,
[class*="circle"]:not([class*="uncircle"]),
[class*="round"]:not([class*="around"]):not([class*="ground"]) {
border-radius: 50% !important;
}
/* v92.8.0 · #30 Neutralise les eyebrows résiduels (compte, mon-theme, mon-theme-3d, palazzo, packs) */
.eyebrow-declassed,
.account-eyebrow,
.three-eyebrow:not(.three-beta),
.three-section-label,
.pack-tier-eyebrow,
.pack-eyebrow,
.pr-eyebrow,
.pr-tier-eyebrow,
.pr-price-label,
.pr-how-num,
.pr-disclaimer-eyebrow,
.form-field-label,
.field-eyebrow,
.section-eyebrow,
.house-eyebrow,
.planet-eyebrow,
.pillar-eyebrow,
.tier-eyebrow,
.compte-eyebrow,
.mon-eyebrow,
[data-eyebrow-declassed] {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: 0.85rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--r-fg-mute) !important;
}
/* v92.8.0 · #30 · Kill eyebrow uppercase patterns in narrow scopes for form field labels
* (labels DATE/HEURE/LIEU/COORDS/SYSTÈME on mon-theme, quota labels on compte). Kept as
* labels (functionally useful) but restyled discreet italic serif. */
label.eyebrow-declassed,
legend.eyebrow-declassed {
display: block !important;
margin-bottom: 6px !important;
}
/* v93.2.0 · audit §7.4 · Labels formulaire tunnel :
Hanken Grotesk 500 aligné à gauche, non italique, corps small.
Fraunces italique reste réservé au titre de page (h1), pas aux labels
(dans un formulaire, l'italique crée des allers-retours de lecture). */
#calculator-block #birth-form .tfc-field > label,
#calculator-block #birth-form .tfc-houses > legend,
#birth-form .tfc-field label,
#birth-form .tfc-houses legend {
font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
font-style: normal !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
text-align: left !important;
}
/* v93.2.0 · audit §7.1 · « Charger un profil enregistré » : visible seulement
pour un utilisateur connecté ou qui a déjà un profil en localStorage.
Les flags html.is-authed et html.has-active-chart sont posés par le
preflight du
. */
.profile-loader { display: none !important; }
html.is-authed .profile-loader,
html.has-active-chart .profile-loader { display: block !important; }
/* v93.2.0 · audit §7.2 · « Information de naissance » : eyebrow à retirer
(mono uppercase LS large = pattern eyebrow, incompatible doctrine site).
On masque via CSS pour ne pas casser le JS qui pourrait la référencer. */
#birth-form .tfc-head { display: none !important; }
/* v93.2.0 · audit §7.6 · Hit-zone checkbox « Heure inconnue » 44px min */
#birth-form .tfc-time-unknown {
min-height: 44px !important;
padding: 4px 0 !important;
cursor: pointer !important;
}
#birth-form .tfc-time-unknown input[type="checkbox"] {
width: 22px !important;
height: 22px !important;
cursor: pointer !important;
}
#birth-form .tfc-time-unknown span {
cursor: pointer !important;
user-select: none !important;
}
/* v93.2.0 · audit §7.3 · Champs date et heure éclatés (JJ/MM/AAAA + HH/MM)
pour supprimer la dépendance à la locale du navigateur et rendre la
saisie de l'année de naissance triviale. */
.tfc-split-group {
display: grid;
gap: 8px;
align-items: end;
}
.tfc-split-group[data-cols="3"] {
grid-template-columns: 1fr 1fr 1.4fr;
}
.tfc-split-group[data-cols="2"] {
grid-template-columns: 1fr 1fr;
}
.tfc-split-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.tfc-split-field small {
font-size: 0.72rem;
color: var(--r-fg-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
.tfc-split-field input {
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
text-align: center !important;
font-variant-numeric: tabular-nums;
}
/* v94.9.0 · Style de base des champs éclatés hors #birth-form.
Le composant universel (split-date-inputs-universal-v94.js) génère
ces champs sur les 9 pages outils, qui n'ont pas les overrides
#birth-form de mon-theme. Sans ça, ils héritent du style de page
et peuvent repasser sous 16px → zoom iOS au focus. */
.tfc-split-field input:not(#birth-form input) {
font-size: 16px !important;
min-height: 48px !important;
padding: 13px 8px !important;
width: 100% !important;
box-sizing: border-box !important;
border: 1px solid var(--r-fg-line-strong) !important;
border-radius: 0 !important;
background: var(--r-bg-1) !important;
color: var(--r-fg) !important;
line-height: 1.3 !important;
}
.tfc-split-field input:not(#birth-form input):focus {
border-color: var(--r-gold) !important;
outline: none;
}
.tfc-split-field input:disabled {
opacity: 0.4 !important;
cursor: not-allowed;
}
/* v93.2.0 · audit §7.3 · Lien discret « Charger un profil enregistré »
sous le formulaire (fallback pour utilisateurs qui savent qu'ils ont
un profil sauvé, mais ne sont pas connectés). */
.tfc-profile-link {
display: block;
margin-top: 18px;
font-size: 0.85rem;
color: var(--r-fg-mute);
text-align: center;
text-decoration: none;
border-bottom: 1px dotted rgba(228, 192, 126, 0.35);
padding-bottom: 2px;
transition: color 0.15s;
}
.tfc-profile-link:hover {
color: var(--r-gold);
border-bottom-color: var(--r-gold);
}
/* v92.8.0 · #53 Spacing vertical réduit sections mobile */
@media (max-width: 768px) {
section,
.section,
main > article > section,
main > section {
padding-top: clamp(48px, 8vw, 80px) !important;
padding-bottom: clamp(48px, 8vw, 80px) !important;
}
/* Bloque les margin excessifs sur section */
section + section {
margin-top: 0 !important;
}
}
/* ============================================================
v92.8.1 - Fix palazzo hero mega (VOS QUESTIONS 176px)
============================================================
Le .cn-hero-mega force clamp(4.5rem, ..., 11rem) via
cinematic-tokens.css. On l'override sur palazzo uniquement.
*/
.pr-hero .cn-sec-heading.cn-hero-mega,
.pr-hero h1.cn-hero-mega,
.pr-hero .cn-sec-heading--hero.cn-hero-mega {
font-size: clamp(2.6rem, 5vw, 4.5rem) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
}
@media (min-width: 1200px) {
.pr-hero .cn-sec-heading.cn-hero-mega {
font-size: 4rem !important;
}
}
/* ============================================================
v92.9.7 - Menu v5-nav toujours centre + double CTA guest/authed
============================================================ */
@media (min-width: 1024px) {
/* Layout : logo absolute gauche, menu au milieu, CTA absolute droite */
.v5-nav-inner {
position: relative !important;
justify-content: center !important;
padding: 0 var(--r-gutter);
}
/* v94.0.6 — était .v5-brand-lockup sans portée : le logo du pied de page
et celui du panneau mobile s'échappaient aussi. Scopé à la barre. */
.v5-nav-inner > .v5-brand-lockup {
position: absolute !important;
left: var(--r-gutter) !important;
top: 50%;
transform: translateY(-50%);
}
.v5-nav-links {
margin: 0 auto !important;
}
.v5-nav-cta,
.v5-nav-cta-guest,
.v5-nav-cta-authed {
position: absolute !important;
right: var(--r-gutter) !important;
top: 50%;
transform: translateY(-50%);
}
/* v94.9.6 — BUG attrapé par la première recette rendue au navigateur.
Le sélecteur .v5-nav-cta-guest ci-dessus matche AUSSI le lien
« Se connecter » (class="v5-nav-signin v5-nav-cta-guest") : les deux
CTA invités étaient épinglés au même right, superposés en un amas
illisible. Invisible pour Stéphane — connecté, il ne voit que
« Mon compte », seul à son ancrage. Tous les visiteurs NON connectés
voyaient l'amas, sur ~6 900 pages.
« Se connecter » se décale de la largeur du bouton doré
(~160 px pour « Mon thème gratuit » en 14 px) + une gouttière. */
.v5-nav-inner > .v5-nav-signin.v5-nav-cta-guest {
right: calc(var(--r-gutter) + 176px) !important;
margin-right: 0;
}
}
/* v94.9.8 — recette rendue sur draft, fenêtre 1200px : l'offset ci-dessus
suffit aux écrans larges mais fait chevaucher « Se connecter » sur le
lien « Tarifs » entre 1024 et ~1340px (menu centré + CTA absolus, la
place manque). Prototypé en direct dans le navigateur avant écriture :
à ces largeurs le lien texte disparaît — l'accès connexion demeure
(CTA « Mon compte / Se connecter » en fin de page + « Mon Espace » au
footer), et le bouton doré garde l'entrée principale. */
@media (min-width: 1024px) and (max-width: 1339px) {
.v5-nav-inner > .v5-nav-signin.v5-nav-cta-guest {
display: none !important;
}
}
/* ============================================================
v94.4.0 audit §8 + §9 · Célébrités + accessibilité systémique
============================================================ */
/* §8 · Contraste des tables denses (positions, aspects, sabians).
Le rapport pointait un contraste ~4.3:1 avec --r-fg-mute sur bg élevé.
Règle générique : les cellules de table utilisent --r-fg-dim, jamais mute. */
table.celeb-table td,
table.celeb-table th,
.result-full table td,
.result-full table th,
.result-full .table-positions td,
.result-full .table-aspects td,
.result-full .sabians li {
color: var(--r-fg-dim) !important;
}
.result-full table {
font-size: max(14px, 0.875rem);
}
/* §8 · CTA sticky mobile en bas de page célébrités */
.celeb-sticky-cta {
display: none;
}
/* v94.8.0 audit 3.3 · La bannière cookies (bottom:12px, pleine largeur mobile,
z-index 9000) recouvrait entièrement le sticky-cta (z-index 90) au premier
chargement : précisément la visite SEO froide que ce CTA doit convertir.
Tant que la bannière est présente, on masque le CTA ; il apparaît dès que
le consentement est donné et que la bannière est retirée du DOM.
Fallback pour les navigateurs sans :has() (Safari iOS < 15.4) : le CTA
reste affiché, simplement recouvert comme avant — pas de régression. */
@supports selector(body:has(*)) {
@media (max-width: 720px) {
body:has(#sg-cookie-banner) .celeb-sticky-cta {
display: none !important;
}
}
}
@media (max-width: 720px) {
.celeb-sticky-cta {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
background: color-mix(in srgb, var(--r-bg-0) 94%, transparent);
border-top: 1px solid var(--r-fg-line);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
justify-content: center;
}
.celeb-sticky-cta a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding: 12px 28px;
background: var(--r-gold);
color: #0A0A0A;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 600;
font-size: 15px;
text-decoration: none;
letter-spacing: 0.01em;
transition: background 0.15s;
}
.celeb-sticky-cta a:hover,
.celeb-sticky-cta a:focus-visible {
background: var(--r-gold-bright);
}
/* Laisser respirer le contenu au-dessus du sticky */
body.celeb-page main {
padding-bottom: 90px;
}
}
/* §8 · Maillage interne fin de page — bloc « Aller plus loin » */
.celeb-relais {
max-width: 920px;
margin: 64px auto 32px;
padding: 40px 24px;
border-top: 1px solid var(--r-fg-line);
border-bottom: 1px solid var(--r-fg-line);
text-align: center;
}
.celeb-relais h3 {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
color: var(--r-fg);
margin: 0 0 12px;
line-height: 1.2;
}
.celeb-relais p {
color: var(--r-fg-dim);
font-size: 15px;
margin: 0 0 24px;
line-height: 1.5;
}
.celeb-relais-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.celeb-relais-actions a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
min-height: 44px;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
font-size: 15px;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.celeb-relais-actions .btn-gold {
background: var(--r-gold);
color: #0A0A0A;
}
.celeb-relais-actions .btn-gold:hover,
.celeb-relais-actions .btn-gold:focus-visible {
background: var(--r-gold-bright);
}
.celeb-relais-actions .btn-outline {
background: transparent;
border: 1px solid var(--r-fg-line-strong);
color: var(--r-fg);
}
.celeb-relais-actions .btn-outline:hover,
.celeb-relais-actions .btn-outline:focus-visible {
border-color: var(--r-gold);
color: var(--r-gold);
}
/* §9 · Interdiction --r-fg-mute sous 14px : safeguard global.
Tout élément qui hérite de mute doit passer à dim s'il fait <14px. */
[style*="color: var(--r-fg-mute)"],
[style*="color:var(--r-fg-mute)"] {
color: var(--r-fg-dim) !important;
}
/* ============================================================
v94.9.0 · DOCTRINE ZÉRO-EYEBROW · requalification globale
============================================================
Le CLAUDE.md du site pose : « Aucun label mono en majuscules à
interlettrage large au-dessus d'un titre. Aucune exception
esthétique. Un label qui porte une vraie information est
requalifié en sérif casse normale, pas conservé en eyebrow. »
19 classes violaient encore la règle sur 10+ pages outils
(mono 0.68rem, letter-spacing 0.24em, uppercase). Leurs contenus
portent une vraie information (« Soleil · Ce que vous devenez »,
« Volet 1 · Ce que vous valez à vos yeux ») : ils sont donc
requalifiés, pas supprimés.
Règle unique plutôt que 19 fichiers CSS retouchés : elle attrape
aussi les futurs eyebrows, quelle que soit la page.
============================================================ */
.bsm-results-eyebrow,
.bsm-share-eyebrow,
.bsm-upsell-eyebrow,
.cma-archetype-eyebrow,
.cma-eyebrow,
.cma-ombre-eyebrow,
.cma-share-eyebrow,
.cmf-eyebrow,
.cmf-card-eyebrow,
.cmf-share-eyebrow,
.ia-eyebrow,
.palazzo-eyebrow,
.placeholder-eyebrow,
.ra-card-eyebrow,
.ra-mantra-eyebrow,
.ra-share-eyebrow,
.tla-card-eyebrow,
.tla-crosssell-eyebrow,
.tla-share-eyebrow,
.trinite-card-eyebrow,
.trinite-share-eyebrow,
.syn-eyebrow,
.syn-card-eyebrow,
/* v94.9.5 — eyebrows débusqués par la capture de Stéphane sur la
Boussole : ils échappaient au filet [class$="-eyebrow"] parce que
nommés « -label ». Même pattern exact (mono 0.62rem, 0.24em,
uppercase, posés au-dessus de leur contenu) : « FENÊTRE », « CE QUI
EST TOUCHÉ EN VOUS », « NATURE DE L'ASPECT », « LE CONSEIL-PIVOT »…
Ils portent une information réelle : requalifiés, pas supprimés.
Bonus contraste : leur or clair faisait ~2:1 sur les fonds redevenus
papier ; --r-gold-deep les remet à ~7:1. */
.palazzo-section-label,
.bsm-period-label,
.bsm-touche-label,
.bsm-aspect-label,
.bsm-conseil-label,
.ra-sub-label,
.cma-verdict-label,
.fam-person-label,
.fam-amp-label,
.fam-verdict-label,
[class$="-eyebrow"],
[class*="-eyebrow "] {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 1rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--r-gold-deep) !important;
opacity: 1 !important;
}
/* Le « BONJOUR » de palazzo-chat et le « DÉMO · BIENTÔT DISPONIBLE »
de palazzo-demo sont purement décoratifs : rien à requalifier,
ils disparaissent. */
.palazzo-chat-hello-eyebrow,
.palazzo-demo-eyebrow {
display: none !important;
}
/* .section-head-right : méta-commentaires décoratifs de packs.html
(« Preuve sensible », « Avis vérifiés Google », « Trois formats,
un seul calendrier »). Mono uppercase LS 0.1em + contraste mute
à 11px : pattern eyebrow ET illisible. Aucune information utile
au lecteur, donc suppression plutôt que requalification.
La règle #reserver existante est englobée ici. */
.section-head-right {
display: none !important;
}
/* compte.html · .metric-label (« Profils enregistrés », « Quota Palazzo
· aujourd'hui », « Abonnement », « Prochain rendez-vous ») : mono
0.7rem uppercase LS 0.18em au-dessus de chaque valeur. Eyebrow
caractérisé, mais le contenu porte une vraie information → requalifié. */
body.page-compte-v36 .metric-label {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 0.95rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--r-fg-dim) !important;
}
/* compte.html · .account-pill (« Premium actif ») : ce n'est PAS un
eyebrow au sens de la doctrine (badge de statut inline, pas un label
au-dessus d'un titre de section). Il reste un badge, mais on sort son
letter-spacing de la zone 0.14–0.24em qui signe le pattern eyebrow. */
body.page-compte-v36 .account-pill {
letter-spacing: 0.04em !important;
font-size: 0.78rem !important;
}
/* v94.9.5 — même arbitrage pour les pills des pages outils : badges de
données réelles (« MOMENT PIVOT DANS LA FENÊTRE » = statut du transit,
mots-clés du chapitre, méthode de calcul, thème solaire). Pas des
eyebrows — ils ne coiffent pas un titre — mais leur tracking 0.12-0.18em
les faisait ressembler au pattern. On les sort de la zone, en gardant
la forme badge. Contraste : or profond au lieu de l'or clair (~2:1 sur
les fonds redevenus papier). */
.bsm-period-peak,
.bsm-method-pill,
.bsm-chapter-keywords li,
.cma-solar-pill {
letter-spacing: 0.04em !important;
color: var(--r-gold-deep) !important;
}
/* v94.8.0 audit 3.8 · touch-action: manipulation sur les interactifs.
Supprime le délai de 300ms du double-tap-zoom sur les CTA mobiles. */
a, button, [role="button"], input, select, textarea, label, summary {
touch-action: manipulation;
}
/* §9 · Hit-zones 44px sur les liens footer (WCAG 2.5.5 amélioré) */
.v5-footer a,
.v5-footer-instagram,
.v5-footer-bottom-legal a {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 6px 0;
}
/* §9 · Bouton pause sur les vidéos autoplay (WCAG 2.2.2) */
.video-controls {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 3;
display: flex;
gap: 8px;
}
.video-pause-btn {
width: 44px;
height: 44px;
background: rgba(10, 10, 10, 0.72);
color: #F0EDE7;
border: 1px solid rgba(240, 237, 231, 0.35);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, transform 0.15s;
font-size: 16px;
}
.video-pause-btn:hover,
.video-pause-btn:focus-visible {
background: rgba(10, 10, 10, 0.9);
transform: scale(1.05);
}
.video-pause-btn[aria-pressed="true"]::before {
content: "▶";
}
.video-pause-btn:not([aria-pressed="true"])::before {
content: "❚❚";
font-size: 12px;
letter-spacing: 1px;
}
/* v94.8.0 audit 4.1 · État actif de la navigation.
aria-current="page" était absent partout : impossible de savoir où l'on est. */
.v5-nav-links a[aria-current="page"] {
color: var(--r-fg) !important;
font-weight: 500;
}
.v5-nav-links a[aria-current="page"]::after {
transform: scaleX(1) !important;
}
.v5-nav-sheet-item a[aria-current="page"] {
color: var(--r-gold-deep) !important;
}
/* v94.8.0 audit 4.4 · Sheet mobile : « Mon compte » faisait doublon avec
« Se connecter » pour les invités (même cible). On ne l'affiche que
pour les utilisateurs authentifiés. */
.v5-nav-sheet-account { display: none; }
html.is-authed .v5-nav-sheet-account,
body.is-authed .v5-nav-sheet-account { display: block; }
/* v94.3.1 audit §4 — Lien « Se connecter » discret (guest) et item nav primary */
.v5-nav-signin {
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 12px;
margin-right: 12px;
font-family: 'Hanken Grotesk', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--r-fg-dim);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.v5-nav-signin:hover,
.v5-nav-signin:focus-visible {
color: var(--r-fg);
border-bottom-color: var(--r-fg-dim);
}
.v5-nav-signin-mobile {
border-top: 1px solid var(--r-fg-line);
margin-top: 8px;
padding-top: 12px;
}
.v5-nav-primary {
color: var(--r-gold-deep) !important;
font-weight: 500 !important;
}
/* Double CTA guest/authed */
.v5-nav-cta-authed {
display: none;
}
body.is-authed .v5-nav-cta-guest,
body.is-authed .v5-nav-cta:not(.v5-nav-cta-authed):not(.v5-nav-cta-guest) {
display: none !important;
}
body.is-authed .v5-nav-cta-authed {
display: inline-flex !important;
}
/* Cacher le lien "Mon compte" du menu principal quand loggue (evite le doublon avec le CTA) */
body.is-authed .v5-nav-links li a[href*="compte.html"] {
display: none !important;
}
body.is-authed .v5-nav-links li:has(a[href*="compte.html"]:only-child) {
display: none !important;
}
/* Idem dans la sheet mobile */
body.is-authed .v5-nav-sheet-item a[href*="compte.html"] {
display: none;
}
/* CTA mobile sheet aussi : double state */
.v5-nav-sheet-cta-authed { display: none; }
body.is-authed .v5-nav-sheet-cta:not(.v5-nav-sheet-cta-authed):not(.v5-nav-sheet-cta-guest) { display: none; }
body.is-authed .v5-nav-sheet-cta-guest { display: none; }
body.is-authed .v5-nav-sheet-cta-authed { display: block; }
/* ============================================================
v92.9.8 - Preflight auth (evite FOWC)
============================================================
html.is-authed est posé en 1er par le preflight script inline dans .
body.is-authed est le fallback via SGAuth.currentUser() async (peut arriver 500ms-3s après).
Les deux se cumulent, donc les 2 sélecteurs sont valides.
============================================================ */
html.is-authed .v5-nav-cta-guest,
html.is-authed .v5-nav-sheet-cta-guest {
display: none !important;
}
html.is-authed .v5-nav-cta-authed {
display: inline-flex !important;
}
html.is-authed .v5-nav-sheet-cta-authed {
display: block !important;
}
html.is-authed .v5-nav-links li a[href*="compte.html"],
html.is-authed .v5-nav-sheet-item a[href*="compte.html"] {
display: none !important;
}
/* Pour mon-theme.html : masquer le formulaire de saisie si un chart actif est en localStorage
-> evite le flash "formulaire vide" avant que le JS ne le remplace par la card "profil enregistré" */
html.has-active-chart body:not(.no-preflight-hide) #birth-form-wrapper[data-preflight-hide],
html.has-active-chart body:not(.no-preflight-hide) .theme-form-preflight-hide {
visibility: hidden;
transition: visibility 0s linear 400ms;
}
/* ============================================================
v93.3.3 · EXTENSION LIGHT AUX PAGES INTÉRIEURES (Claude)
============================================================
1) Remap des deux nomenclatures oubliées : cinematic --nv-*
et v78 (--white / --black-* / --gold-warm...).
2) Variables --lx-* : chaque couleur codée en dur C des piles
anciennes a été réécrite en var(--lx-…, C). Sans thème :
fallback C, rendu dark inchangé au pixel. En light, les
valeurs ci-dessous prennent la main.
3) Dans les îlots sombres volontaires, --lx-*: initial
restaure le fallback d’origine. */
html[data-theme="light"] {
/* Nomenclature cinematic --nv-* (5e système, pages intérieures) */
--nv-navy-deep: var(--t-paper);
--nv-navy-mid: var(--t-surface);
--nv-cream: var(--t-ink);
--nv-cream-mute: rgba(22, 19, 14, 0.64);
--nv-cream-faint: var(--t-ink-45);
--nv-gold: var(--t-gold);
--nv-gold-strong: var(--t-gold-deep);
--nv-gold-soft: var(--t-gold-light);
/* --nv-gold-deep var(--t-gold-alt) déjà lisible sur clair : conservé */
/* Nomenclature v78 (6e système) */
--white: var(--t-ink);
--white-dim: var(--t-ink-74);
--white-mute: var(--t-ink-55);
--black-soft: var(--t-surface-2);
--black-elev: var(--t-surface-3);
--gold-soft: var(--t-gold);
--gold-warm: var(--t-gold-deep);
--gold-dim: var(--t-gold-60);
--cream-veil: rgba(22, 19, 14, 0.03);
--cream-veil-2: var(--t-ink-05);
/* Compléments ds-* absents du remap initial */
--ds-text-bright: var(--t-ink);
--ds-text-meta: rgba(22, 19, 14, 0.58);
--ds-night-deep: var(--t-paper);
--ds-night-mid: var(--t-surface-2);
--ds-night-up: var(--t-surface-3);
--ds-gold-bright: var(--t-gold-light);
--ds-gold: var(--t-gold);
--ds-gold-pale: var(--t-gold-light);
--ds-gold-deep: var(--t-gold);
--ds-line-vivid: var(--t-ink-32);
--ds-line-gold: var(--t-gold-35);
/* Variables --lx-* générées (couleurs en dur des piles anciennes) */
--lx-goldink: var(--t-gold);
--lx-goldink-1: rgba(138, 106, 47, 0.1);
--lx-goldink-12: rgba(138, 106, 47, 0.12);
--lx-goldink-15: rgba(138, 106, 47, 0.15);
--lx-goldink-18: rgba(138, 106, 47, 0.18);
--lx-goldink-2: rgba(138, 106, 47, 0.2);
--lx-goldink-22: rgba(138, 106, 47, 0.22);
--lx-goldink-25: rgba(138, 106, 47, 0.25);
--lx-goldink-28: rgba(138, 106, 47, 0.28);
--lx-goldink-3: rgba(138, 106, 47, 0.3);
--lx-goldink-32: rgba(138, 106, 47, 0.32);
--lx-goldink-35: var(--t-gold-35);
--lx-goldink-4: rgba(138, 106, 47, 0.4);
--lx-goldink-45: rgba(138, 106, 47, 0.45);
--lx-goldink-5: rgba(138, 106, 47, 0.5);
--lx-goldink-55: rgba(138, 106, 47, 0.55);
--lx-goldink-6: var(--t-gold-60);
--lx-goldink-65: rgba(138, 106, 47, 0.65);
--lx-goldink-7: rgba(138, 106, 47, 0.7);
--lx-goldink-72: rgba(138, 106, 47, 0.72);
--lx-goldink-75: rgba(138, 106, 47, 0.75);
--lx-goldink-78: rgba(138, 106, 47, 0.78);
--lx-goldink-8: rgba(138, 106, 47, 0.08);
--lx-goldink-85: rgba(138, 106, 47, 0.85);
--lx-goldink-9: rgba(138, 106, 47, 0.9);
--lx-goldink-95: rgba(138, 106, 47, 0.95);
--lx-ink: var(--t-ink);
--lx-ink-1: rgba(22, 19, 14, 0.1);
--lx-ink-18: rgba(22, 19, 14, 0.18);
--lx-ink-22: rgba(22, 19, 14, 0.22);
--lx-ink-25: rgba(22, 19, 14, 0.25);
--lx-ink-35: rgba(22, 19, 14, 0.35);
--lx-ink-4: rgba(22, 19, 14, 0.4);
--lx-ink-45: var(--t-ink-45);
--lx-ink-5: rgba(22, 19, 14, 0.5);
--lx-ink-55: var(--t-ink-55);
--lx-ink-6: rgba(22, 19, 14, 0.6);
--lx-ink-65: rgba(22, 19, 14, 0.65);
--lx-ink-7: rgba(22, 19, 14, 0.7);
--lx-ink-72: rgba(22, 19, 14, 0.72);
--lx-ink-75: rgba(22, 19, 14, 0.75);
--lx-ink-78: rgba(22, 19, 14, 0.78);
--lx-ink-8: rgba(22, 19, 14, 0.8);
--lx-ink-82: rgba(22, 19, 14, 0.82);
--lx-ink-85: rgba(22, 19, 14, 0.85);
--lx-ink-86: rgba(22, 19, 14, 0.86);
--lx-ink-88: rgba(22, 19, 14, 0.88);
--lx-ink-9: rgba(22, 19, 14, 0.9);
--lx-ink-92: rgba(22, 19, 14, 0.92);
--lx-ink-95: rgba(22, 19, 14, 0.95);
--lx-roseink: var(--t-rose);
--lx-roseink-28: rgba(164, 72, 94, 0.4);
--lx-surf-040611: var(--t-paper);
--lx-surf-07091a: var(--t-surface);
--lx-surf-0b1020: var(--t-paper);
--lx-surf-0b1024: var(--t-paper);
--lx-surf-0f1428: var(--t-surface);
--lx-surfa-5: rgba(250, 248, 244, 0.5);
--lx-surfa-55: rgba(250, 248, 244, 0.55);
--lx-surfa-6: rgba(250, 248, 244, 0.6);
--lx-surfa-65: rgba(250, 248, 244, 0.65);
--lx-surfa-7: rgba(250, 248, 244, 0.7);
--lx-surfa-72: rgba(250, 248, 244, 0.72);
--lx-surfa-78: rgba(250, 248, 244, 0.78);
--lx-surfa-82: rgba(250, 248, 244, 0.82);
--lx-surfa-85: rgba(250, 248, 244, 0.85);
--lx-surfa-86: rgba(250, 248, 244, 0.86);
--lx-surfa-88: rgba(250, 248, 244, 0.88);
--lx-surfa-9: rgba(250, 248, 244, 0.9);
--lx-surfa-92: rgba(250, 248, 244, 0.92);
--lx-surfa-94: rgba(250, 248, 244, 0.94);
--lx-surfa-95: rgba(250, 248, 244, 0.95);
--lx-surfa-96: rgba(250, 248, 244, 0.96);
--lx-surfa-97: rgba(250, 248, 244, 0.97);
--lx-surfa-98: rgba(250, 248, 244, 0.98);
--lx-surfb-4: rgba(255, 255, 255, 0.4);
--lx-surfb-45: rgba(255, 255, 255, 0.45);
--lx-surfb-5: rgba(255, 255, 255, 0.5);
--lx-surfb-55: rgba(255, 255, 255, 0.55);
--lx-surfb-6: rgba(255, 255, 255, 0.6);
--lx-surfb-65: rgba(255, 255, 255, 0.65);
--lx-surfb-7: rgba(255, 255, 255, 0.7);
--lx-surfb-75: rgba(255, 255, 255, 0.75);
--lx-surfb-85: rgba(255, 255, 255, 0.85);
--lx-surfb-95: rgba(255, 255, 255, 0.95);
--lx-veil-0: rgba(22, 19, 14, 0);
--lx-veil-35: var(--t-ink-06);
--lx-veil-4: var(--t-ink-06);
--lx-veil-45: var(--t-ink-06);
--lx-veil-8: var(--t-ink-06);
--lx-veilb-1: var(--t-ink-06);
--lx-veilb-25: var(--t-ink-06);
--lx-veilb-3: var(--t-ink-06);
--lx-veilb-32: var(--t-ink-06);
--lx-veilb-35: var(--t-ink-06);
--lx-veilb-4: rgba(22, 19, 14, 0.04);
--lx-veilb-5: var(--t-ink-05);
--lx-veilb-6: var(--t-ink-06);
}
/* Îlots sombres volontaires : retour aux fallbacks d’origine. */
html[data-theme="light"] .surface-dark,
html[data-theme="light"] .testi-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .google-review-card,
html[data-theme="light"] .approche-v6 .approche-card,
html[data-theme="light"] .review-card {
--lx-goldink: initial;
--lx-goldink-1: initial;
--lx-goldink-12: initial;
--lx-goldink-15: initial;
--lx-goldink-18: initial;
--lx-goldink-2: initial;
--lx-goldink-22: initial;
--lx-goldink-25: initial;
--lx-goldink-28: initial;
--lx-goldink-3: initial;
--lx-goldink-32: initial;
--lx-goldink-35: initial;
--lx-goldink-4: initial;
--lx-goldink-45: initial;
--lx-goldink-5: initial;
--lx-goldink-55: initial;
--lx-goldink-6: initial;
--lx-goldink-65: initial;
--lx-goldink-7: initial;
--lx-goldink-72: initial;
--lx-goldink-75: initial;
--lx-goldink-78: initial;
--lx-goldink-8: initial;
--lx-goldink-85: initial;
--lx-goldink-9: initial;
--lx-goldink-95: initial;
--lx-ink: initial;
--lx-ink-1: initial;
--lx-ink-18: initial;
--lx-ink-22: initial;
--lx-ink-25: initial;
--lx-ink-35: initial;
--lx-ink-4: initial;
--lx-ink-45: initial;
--lx-ink-5: initial;
--lx-ink-55: initial;
--lx-ink-6: initial;
--lx-ink-65: initial;
--lx-ink-7: initial;
--lx-ink-72: initial;
--lx-ink-75: initial;
--lx-ink-78: initial;
--lx-ink-8: initial;
--lx-ink-82: initial;
--lx-ink-85: initial;
--lx-ink-86: initial;
--lx-ink-88: initial;
--lx-ink-9: initial;
--lx-ink-92: initial;
--lx-ink-95: initial;
--lx-roseink: initial;
--lx-roseink-28: initial;
--lx-surf-040611: initial;
--lx-surf-07091a: initial;
--lx-surf-0b1020: initial;
--lx-surf-0b1024: initial;
--lx-surf-0f1428: initial;
--lx-surfa-5: initial;
--lx-surfa-55: initial;
--lx-surfa-6: initial;
--lx-surfa-65: initial;
--lx-surfa-7: initial;
--lx-surfa-72: initial;
--lx-surfa-78: initial;
--lx-surfa-82: initial;
--lx-surfa-85: initial;
--lx-surfa-86: initial;
--lx-surfa-88: initial;
--lx-surfa-9: initial;
--lx-surfa-92: initial;
--lx-surfa-94: initial;
--lx-surfa-95: initial;
--lx-surfa-96: initial;
--lx-surfa-97: initial;
--lx-surfa-98: initial;
--lx-surfb-4: initial;
--lx-surfb-45: initial;
--lx-surfb-5: initial;
--lx-surfb-55: initial;
--lx-surfb-6: initial;
--lx-surfb-65: initial;
--lx-surfb-7: initial;
--lx-surfb-75: initial;
--lx-surfb-85: initial;
--lx-surfb-95: initial;
--lx-veil-0: initial;
--lx-veil-35: initial;
--lx-veil-4: initial;
--lx-veil-45: initial;
--lx-veil-8: initial;
--lx-veilb-1: initial;
--lx-veilb-25: initial;
--lx-veilb-3: initial;
--lx-veilb-32: initial;
--lx-veilb-35: initial;
--lx-veilb-4: initial;
--lx-veilb-5: initial;
--lx-veilb-6: initial;
/* nomenclatures nv/v78 re-scopées en sombre dans les îlots */
--nv-navy-deep: #040611;
--nv-navy-mid: #0B1020;
--nv-cream: #F8F2DE;
--nv-cream-mute: rgba(248, 242, 222, 0.65);
--nv-cream-faint: rgba(248, 242, 222, 0.4);
--nv-gold: #E4C07E;
--nv-gold-strong: #F4D58A;
--nv-gold-soft: var(--t-gold-bright);
--white: #F8F2DE;
--white-dim: #D7CDB3;
--white-mute: #968B72;
--black-soft: #141A36;
--black-elev: #1C2549;
--gold-soft: #D9B978;
--gold-warm: #E6C886;
--gold-dim: rgba(217, 185, 120, 0.55);
--cream-veil: rgba(243, 235, 217, 0.03);
--cream-veil-2: rgba(248, 242, 222, 0.05);
--ds-text-bright: #F8F2DE;
--ds-text-meta: #8A7F66;
--ds-gold-bright: #E4C07E;
--ds-gold: #D4B87A;
--ds-gold-pale: #F4D58A;
--ds-gold-deep: #C8A25C;
}
/* v93.3.3 · bouton "Calculer mon thème" (mon-theme.html) : le libellé
passait sur deux lignes et était tronqué par overflow:hidden. */
.tfc-cta {
width: auto;
height: auto;
min-height: 48px;
white-space: nowrap;
}
/* v93.3.3 · panneaux navy translucides (roue natale, ciel du jour) en clair */
html[data-theme="light"] .wheel-params,
html[data-theme="light"] .wheel-birth-info,
html[data-theme="light"] .aspect-detail,
html[data-theme="light"] .planet-detail,
html[data-theme="light"] .transits-toggle-box {
background: rgba(255, 255, 255, 0.72);
border-color: rgba(22, 19, 14, 0.14);
}
/* v93.3.3 · labels de groupes du sous-menu nav : or trop pâle sur clair */
html[data-theme="light"] .v5-nav-submenu-group {
color: rgba(138, 106, 47, 0.85);
}
/* v93.3.3 · fond décoratif .bg-mesh (celebrites, etc.) : clair en light */
html[data-theme="light"] .bg-mesh {
background: var(--t-paper);
}
html[data-theme="light"] .bg-mesh-blob {
opacity: 0.22;
}
html[data-theme="light"] #starfield {
opacity: 0.15;
}
/* v93.3.4 · Labels de degrés des planètes (roue natale, synastrie, transits,
célébrités). Dessinés en SVG par astrology.js avec fill="#F3EBD9" codé en
dur : crème invisible sur le fond clair. La règle CSS prime sur l'attribut
de présentation SVG. Le parchemin de la roue reste crème dans les deux
thèmes, donc on ne cible QUE le texte des degrés hors-roue. */
html[data-theme="light"] .planet-deg {
fill: #2A2014;
}
/* v93.3.5 · Chargeur de profil (profile-loader.js injecte ses styles en JS
avec des fonds bleu nuit translucides → gris boueux sur fond clair).
En thème clair : surfaces blanches, texte encre, accents or lisibles.
Zéro gris. La règle html[data-theme=light] prime sur le style injecté. */
html[data-theme="light"] .pl-details{
background:var(--t-surface);
border-color:rgba(138,106,47,0.30);
}
html[data-theme="light"] .pl-summary{ color:var(--t-gold); }
html[data-theme="light"] .pl-body{
color:var(--t-ink);
border-top-color:rgba(138,106,47,0.18);
}
html[data-theme="light"] .pl-link,
html[data-theme="light"] .pl-select-label,
html[data-theme="light"] .pl-feedback{ color:var(--t-gold); }
html[data-theme="light"] .pl-body p{ color:rgba(22,19,14,0.78); }
html[data-theme="light"] .pl-select{
background:var(--t-surface);
border-color:rgba(138,106,47,0.38);
color:var(--t-ink);
}
html[data-theme="light"] .pl-select:focus{ outline-color:var(--t-gold); }
/* ============================================================
v93.3.6 · CHASSE AU GRIS (thème clair)
Tous ces panneaux étaient des dégradés bleu nuit translucides,
sautés par le remap, qui virent au gris boueux sur papier, avec
du texte sombre devenu illisible. On les repasse en ÎLOTS NUIT
solides (zéro gris, zéro transparence) et on rétablit le texte
clair + l'or à l'intérieur. Radius net, bordure or fine.
============================================================ */
/* v93.3.15 — les FORMULAIRES et les colonnes personne sortent de l'îlot nuit :
ils adoptent la carte blanche du calculateur « Mon thème » (référence).
Seules les cartes de RÉSULTAT restent en îlot nuit. */
html[data-theme="light"] :is(
.tla-card, .ra-card, .trinite-card, .cma-archetype-card,
.cma-score-card, .fam-card, .fam-score-card, .pa-axis-card,
.grimoire-card, .fam-link-card.is-active, .cn-liquid-glass-strong
){
/* v93.3.16 — plus d'îlot nuit : carte blanche à filet doré, comme les
formulaires et le calculateur de référence. Texte en encre foncée. */
background: var(--t-surface) !important;
background-image: none !important;
border-color: rgba(201,162,76,0.28) !important;
color: var(--t-ink-strong) !important;
box-shadow: none !important;
--nv-cream:var(--t-ink-strong); --nv-cream-mute:rgba(26,23,18,0.66); --nv-cream-faint:rgba(26,23,18,0.45);
--r-fg:var(--t-ink-strong); --r-fg-dim:rgba(26,23,18,0.74); --r-fg-mute:rgba(26,23,18,0.55); --r-fg-line:rgba(26,23,18,0.14);
--fg:var(--t-ink-strong); --fg-dim:rgba(26,23,18,0.74); --fg-mute:rgba(26,23,18,0.55);
--ds-text:var(--t-ink-strong); --ds-text-dim:rgba(26,23,18,0.70); --ds-text-mute:rgba(26,23,18,0.55); --ds-text-bright:var(--t-ink-strong); --ds-text-meta:rgba(26,23,18,0.5);
--cream:var(--t-ink-strong); --cream-faint:rgba(26,23,18,0.72); --white:var(--t-ink-strong); --white-dim:rgba(26,23,18,0.74); --white-mute:rgba(26,23,18,0.55);
--lx-ink:var(--t-ink-strong); --lx-ink-85:rgba(26,23,18,0.85); --lx-ink-8:rgba(26,23,18,0.80);
--lx-ink-5:rgba(26,23,18,0.5); --lx-ink-55:rgba(26,23,18,0.55); --lx-ink-6:rgba(26,23,18,0.6);
--lx-ink-65:rgba(26,23,18,0.65); --lx-ink-7:rgba(26,23,18,0.7); --lx-ink-75:rgba(26,23,18,0.75);
--lx-ink-78:rgba(26,23,18,0.78);
--nv-gold:var(--t-gold); --nv-gold-strong:var(--t-gold-deep); --ds-gold:var(--t-gold); --ds-gold-bright:var(--t-gold);
--r-gold:var(--t-gold); --r-gold-bright:var(--t-gold-deep); --gold:var(--t-gold); --gold-strong:var(--t-gold-deep);
--lx-goldink:var(--t-gold); --lx-goldink-3:rgba(138,106,47,0.30); --lx-goldink-25:rgba(138,106,47,0.30);
}
/* champs blancs à l'intérieur des îlots : texte encre lisible */
html[data-theme="light"] :is(.cn-form,.tla-form,.ra-form,.trinite-form,.syn-form,.cma-form,.fam-form) input,
html[data-theme="light"] :is(.cn-form,.tla-form,.ra-form,.trinite-form,.syn-form,.cma-form,.fam-form) select{
color:var(--t-ink);
}
/* le select "charger un profil" reste blanc/encre partout */
html[data-theme="light"] .pl-select{ background:var(--t-surface) !important; color:var(--t-ink) !important; }
/* v93.3.6 · CTA « Calculer mon thème » : jamais sur plusieurs lignes.
Le libellé wrappait en 3 lignes dans sa cellule. On force une ligne,
largeur au contenu, et un letter-spacing plus serré, plus élégant. */
.tfc-cta, .tfc-cta-secondary, .syn-cta, .pa-cta-link, .ra-cta, .cma-cta, .fam-cta{
white-space: nowrap !important;
flex-wrap: nowrap !important;
width: auto !important;
max-width: none !important;
min-width: max-content;
letter-spacing: 0.06em !important;
}
.tfc-cta > *{ white-space: nowrap !important; }
@media (max-width: 720px){
.tfc-cta, .tfc-cta-secondary{ width: 100% !important; justify-content: center; }
}
/* v93.3.6 · Encart Instagram du footer : chip doré soigné au lieu du
rectangle gris générique. */
.v5-footer-instagram{
gap: 9px;
padding: 10px 18px;
border: 1px solid rgba(227,178,74,0.5);
border-radius: 999px;
color: var(--r-fg);
font-weight: 500;
letter-spacing: 0.01em;
transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.v5-footer-instagram svg{ stroke: var(--r-gold, var(--t-gold-bright)); }
.v5-footer-instagram:hover{
background: var(--r-gold, var(--t-gold-bright));
border-color: var(--r-gold, var(--t-gold-bright));
color: var(--t-on-gold);
transform: translateY(-1px);
}
.v5-footer-instagram:hover svg{ stroke: var(--t-on-gold); }
/* v93.3.6 · Player TV ASTRO : croix de fermeture toujours visible et
contrastée (en clair elle devenait blanc sur blanc), clic vidéo = pause. */
.voyage-modal-close{
z-index: 30 !important;
background: rgba(14,20,36,0.92) !important;
color: #F3ECDD !important;
border: 1px solid rgba(228,192,126,0.6) !important;
}
.voyage-modal-close:hover,
.voyage-modal-close:focus-visible{
background: var(--t-gold-bright) !important;
color: var(--t-on-gold) !important;
border-color: var(--t-gold-bright) !important;
}
.voyage-modal-stage{ cursor: pointer; }
/* responsive mobile : croix un peu plus petite, barre de contrôle qui respire */
@media (max-width: 560px){
.voyage-modal-close{ width: 40px !important; height: 40px !important; top: calc(env(safe-area-inset-top,0px) + 10px) !important; right: 12px !important; }
.voyage-modal-controlbar{ padding-left: 10px !important; padding-right: 10px !important; gap: 8px !important; }
.voyage-mc-time{ display: none; }
}
/* ============================================================
v93.3.7 · LOT DESIGN (retours Stéphane)
============================================================ */
/* 1 · Instagram footer : plus d'encadré, juste icône + texte */
.v5-footer-instagram{
border: none !important;
border-radius: 0 !important;
padding: 4px 0 !important;
background: transparent !important;
min-height: 0 !important;
}
.v5-footer-instagram:hover{
background: transparent !important;
color: var(--r-gold, var(--t-gold-bright)) !important;
transform: none !important;
}
.v5-footer-instagram:hover svg{ stroke: var(--r-gold, var(--t-gold-bright)) !important; }
/* 2 & 6 · Survol gris-bleu supprimé (dominantes cliquables, piliers grimoire,
cartes grimoire). Le survol devient un simple filet or, comme les cartes du bas. */
html[data-theme="light"] a.dominantes-card-clickable:hover,
html[data-theme="light"] .grimoire-pillar:hover,
html[data-theme="light"] .grimoire-card:hover,
html[data-theme="light"] .grimoire-pillar-planetes-signes:hover{
background: transparent !important;
border-color: var(--r-gold, var(--t-gold-bright)) !important;
}
html[data-theme="light"] .dominantes-card-strong{
background: transparent !important;
border-color: rgba(201,162,76,0.45) !important;
}
/* 5 · Grimoire index : glyphes restaurés (demande explicite) */
.grimoire-pillar-glyphs,
.grimoire-pillar-romans{ display: grid !important; }
/* 3 · Titres transits / progressés trop gros */
.transits-toggle-head h3{
font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important;
line-height: 1.15 !important;
}
/* 7 · Célébrités : texte sur la photo en clair (scrim sombre dessous) */
html[data-theme="light"] .celeb-card-photo-overlay .celeb-card-name{
color: #F6F2E8 !important;
}
html[data-theme="light"] .celeb-card-photo-overlay .celeb-card-tagline{
color: rgba(246,242,232,0.82) !important;
}
html[data-theme="light"] .celeb-card-photo-placeholder{
color: rgba(201,162,76,0.55) !important;
}
/* 8 · Packs : les 3 cartes identiques (fond crème de « Thème de l'âme ») + même hauteur */
html .packs-grid-v5{ align-items: stretch !important; }
html[data-theme="light"] .packs-grid-v5 .pack-card,
html[data-theme="light"] .packs-grid-v5 .pack-card:hover,
html[data-theme="light"] .packs-grid-v5 .pack-card.featured{
background: rgba(228, 192, 126, 0.05) !important;
border-color: rgba(228, 192, 126, 0.28) !important;
height: 100% !important;
}
/* 9 · Section Réserver : titre plus sobre, eyebrow retiré, pleine largeur centrée */
#reserver .container.narrow{ max-width: 1120px !important; }
#reserver .section-head{ text-align: center !important; }
#reserver .section-head-left{ width: 100% !important; }
#reserver h2{
font-size: clamp(2rem, 4vw, 3rem) !important;
line-height: 1.05 !important;
}
#reserver .section-head .meta-label,
#reserver .section-head-right,
#reserver .section-head [class*="eyebrow"],
#reserver .section-head [class*="kicker"]{ display: none !important; }
#reserver .calendly-inline-widget{ min-width: 0 !important; width: 100% !important; }
/* ============================================================
v93.3.8 — LOT LISIBILITÉ (3 bugs signalés)
============================================================ */
/* 1 · Célébrités : prénom ET nom en blanc (le nom en ne doit plus rester doré) */
html[data-theme="light"] .celeb-card-photo-overlay .celeb-card-name,
html[data-theme="light"] .celeb-card-photo-overlay .celeb-card-name em{
color: #F6F2E8 !important;
}
/* 2 · Panneau « Les forces qui signent le thème » : même fond que le reste de la page
(le gradient --lx-veilb virait au gris-bleu en clair) */
html[data-theme="light"] .dominantes-panel{
background: transparent !important;
background-image: none !important;
}
/* ============================================================
v93.3.9 — LOT LISIBILITÉ #2 (TV player, cartes navy -> clair)
============================================================ */
/* SCREEN 2 · Cartes vocabulaire planètes (grimoire-card) : fond clair
comme les piliers de l'index, plus de navy ni de survol bleu illisible. */
html[data-theme="light"] .grimoire-card,
html[data-theme="light"] .grimoire-grid-planetes .grimoire-card{
background: #FBF8F1 !important;
background-image: none !important;
border-color: rgba(138,106,47,0.26) !important;
color: var(--t-ink-strong) !important;
--white:var(--t-ink-strong); --white-dim:rgba(26,23,18,0.70); --lx-ink:var(--t-ink-strong);
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .grimoire-card .grimoire-card-glyph{ color:var(--t-gold) !important; }
html[data-theme="light"] .grimoire-card .grimoire-card-name{ color:var(--t-ink-strong) !important; }
html[data-theme="light"] .grimoire-card .grimoire-card-theme{ color:rgba(26,23,18,0.62) !important; }
html[data-theme="light"] .grimoire-card:hover,
html[data-theme="light"] .grimoire-grid-planetes .grimoire-card:hover{
background:#F4EEE1 !important;
border-color: var(--r-gold, var(--t-gold-bright)) !important;
color:var(--t-ink-strong) !important;
}
/* SCREEN 4 & 5 · Page compte : 7e nomenclature --c36-* remappée en clair.
Convertit les cartes metrics + réglages du navy vers le fond clair du site. */
html[data-theme="light"] body.page-compte-v36{
--c36-night:var(--t-paper);
--c36-night-soft:#FBF8F1;
--c36-night-elev:#F3ECDD;
--c36-night-up:#EAE2D2;
--c36-cream:var(--t-ink-strong);
--c36-text:var(--t-ink-strong);
--c36-text-dim:rgba(26,23,18,0.66);
--c36-text-mute:rgba(26,23,18,0.55);
--c36-text-meta:rgba(26,23,18,0.50);
--c36-gold-bright:var(--t-gold);
--c36-gold:var(--t-gold);
--c36-gold-deep:var(--t-gold-light);
--c36-gold-dark:var(--t-gold-deep);
--c36-line:rgba(26,23,18,0.12);
--c36-line-strong:rgba(26,23,18,0.20);
--c36-line-gold:rgba(138,106,47,0.32);
--c36-rust:#A14932;
}
/* SCREEN 5 · Le titre des cartes réglages est un non stylé (le CSS ne
visait que h3) : il tombait en grand format sombre. On l'aligne sur h3. */
body.page-compte-v36 .settings-card h2{
font-family: var(--c36-serif);
font-weight: 400;
font-size: 1.15rem;
color: var(--c36-cream);
margin: 0;
line-height: 1.2;
}
body.page-compte-v36 .settings-card--danger h2{ color: var(--c36-rust); }
/* SCREEN 5 · Trois cartes réglages de même hauteur */
body.page-compte-v36 .settings-grid{ align-items: stretch !important; }
body.page-compte-v36 .settings-card{ height: 100% !important; }
/* ============================================================
v93.3.11 — CHAMPS DE FORMULAIRE : LISIBILITÉ DÉFINITIVE (tout le site)
------------------------------------------------------------
Cause racine : les champs tiraient leur fond d'une variable
(--lx-surfa-*) remappée en clair, pendant que leur couleur de texte
venait d'une variable (--ds-text-bright / --nv-cream) re-forcée en
clair à l'intérieur des îlots navy. Fond clair + texte clair.
Règle unique, spécificité haute : en thème clair, TOUT champ de saisie
est blanc à texte encre. Aucune exception, quel que soit le formulaire.
============================================================ */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea{
color-scheme: light;
background: var(--t-surface) !important;
background-image: none !important;
color: var(--t-ink) !important;
-webkit-text-fill-color: var(--t-ink) !important;
caret-color: var(--t-ink) !important;
border-color: rgba(138,106,47,0.38) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
color: rgba(22,19,14,0.45) !important;
-webkit-text-fill-color: rgba(22,19,14,0.45) !important;
opacity: 1 !important;
}
html[data-theme="light"] select option{
background: var(--t-surface) !important;
color: var(--t-ink) !important;
}
/* Autofill navigateur : ne doit pas réintroduire un texte clair */
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus{
-webkit-text-fill-color: var(--t-ink) !important;
box-shadow: 0 0 0 1000px var(--t-surface) inset !important;
}
/* ============================================================
v93.3.12 — Compatibilité familiale : alignement sur les autres
calculateurs (zéro eyebrow, zéro fond bleu, zéro gris)
============================================================ */
/* Les libellés de carte gardent leur sens mais perdent le pattern eyebrow
(mono + uppercase + letter-spacing large). */
.fam-card-label{
font-family: var(--serif, 'Fraunces', serif);
font-style: italic;
font-weight: 400;
font-size: 0.95rem;
letter-spacing: 0;
text-transform: none;
color: var(--ds-gold-bright, var(--t-gold-bright));
margin: 0 0 0.5rem;
}
html[data-theme="light"] .fam-card-label{ color: var(--t-gold); }
/* La question du sélecteur devient une vraie question, pas une étiquette. */
.fam-link-question{
font-family: var(--serif, 'Fraunces', serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
letter-spacing: 0;
text-transform: none;
color: var(--ds-text-bright, #F3ECD7);
margin: 0 0 1.2rem;
}
html[data-theme="light"] .fam-link-question{ color: var(--t-ink-strong); }
/* Cartes de choix du lien : même langage que les autres cartes du site.
Plus de fond gris (inactif) ni de dégradé bleu marine (actif). */
html[data-theme="light"] .fam-link-selector .fam-link-card,
html[data-theme="light"] .fam-link-card{
background: rgba(228, 192, 126, 0.05) !important;
background-image: none !important;
border-color: rgba(138, 106, 47, 0.26) !important;
color: var(--t-ink-strong) !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .fam-link-selector .fam-link-card.is-active,
html[data-theme="light"] .fam-link-card.is-active{
background: rgba(228, 192, 126, 0.14) !important;
background-image: none !important;
border-color: var(--r-gold, var(--t-gold-bright)) !important;
box-shadow: 0 0 0 1px rgba(201, 162, 76, 0.35) inset !important;
}
html[data-theme="light"] .fam-link-selector .fam-link-card:hover{
background: rgba(228, 192, 126, 0.10) !important;
border-color: var(--r-gold, var(--t-gold-bright)) !important;
}
html[data-theme="light"] .fam-link-name{ color: var(--t-ink-strong) !important; }
html[data-theme="light"] .fam-link-desc{ color: rgba(26,23,18,0.62) !important; opacity: 1 !important; }
html[data-theme="light"] .fam-link-glyph{ color: var(--t-gold) !important; }
/* ============================================================
v93.3.13 — CTA lisibles partout + colonnes beiges + centrage
------------------------------------------------------------
Cause des CTA illisibles : .cn-btn-primary force color:var(--nv-cream),
variable re-forcée en CLAIR à l'intérieur des îlots navy, tandis que
.btn-primary pose un fond beige clair. Texte clair sur fond clair.
Correctif : les CTA primaires deviennent or plein à texte encre,
lisibles aussi bien sur fond clair que sur navy.
============================================================ */
html[data-theme="light"] .btn.btn-primary,
html[data-theme="light"] .cn-btn-primary,
html[data-theme="light"] .fam-cta,
html[data-theme="light"] .cma-cta,
html[data-theme="light"] .syn-cta,
html[data-theme="light"] .tfc-cta,
html[data-theme="light"] .ra-cta,
html[data-theme="light"] .cn-btn-primary.cn-liquid-glass-strong{
background: var(--t-gold-bright) !important;
background-image: none !important;
border: 1px solid var(--t-gold-bright) !important;
color: var(--t-on-gold) !important;
-webkit-text-fill-color: var(--t-on-gold) !important;
box-shadow: none !important;
}
html[data-theme="light"] .btn.btn-primary > *,
html[data-theme="light"] .cn-btn-primary > *,
html[data-theme="light"] .fam-cta > *,
html[data-theme="light"] .cma-cta > *,
html[data-theme="light"] .syn-cta > *,
html[data-theme="light"] .tfc-cta > *{
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
html[data-theme="light"] .btn.btn-primary:hover,
html[data-theme="light"] .cn-btn-primary:hover,
html[data-theme="light"] .fam-cta:hover,
html[data-theme="light"] .cma-cta:hover,
html[data-theme="light"] .syn-cta:hover,
html[data-theme="light"] .tfc-cta:hover{
background: var(--t-gold-hover) !important;
border-color: var(--t-gold-hover) !important;
color: var(--t-on-gold) !important;
}
html[data-theme="light"] .btn-primary::after{ display: none !important; }
/* CTA centré, phrase de réassurance juste en dessous */
html .fam-form-actions,
html .cma-form-actions,
html .syn-form-actions{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.85rem !important;
text-align: center !important;
}
html .fam-form-foot,
html .cma-form-foot,
html .syn-form-foot{ margin: 0 !important; }
/* Le CTA « glass » du hero : on neutralise le voile qui masquait le contraste */
html[data-theme="light"] .cn-btn-primary.cn-liquid-glass-strong{
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .cn-btn-primary.cn-liquid-glass-strong::before{ display: none !important; }
/* Libellé centré dans le bouton */
html[data-theme="light"] .btn.btn-primary,
html[data-theme="light"] .cn-btn-primary{ justify-content: center !important; text-align: center !important; }
/* Colonnes personne : plus de gris, le beige du site */
html[data-theme="light"] .fam-person-card{
background: #F7F2E8 !important;
background-image: none !important;
border-color: rgba(138,106,47,0.28) !important;
color: var(--t-ink-strong) !important;
--nv-cream:var(--t-ink-strong); --cream:var(--t-ink-strong); --white:var(--t-ink-strong); --lx-ink:var(--t-ink-strong);
--ds-text:var(--t-ink-strong); --ds-text-bright:var(--t-ink-strong);
--ds-text-dim:rgba(26,23,18,0.66); --ds-text-mute:rgba(26,23,18,0.55);
--ds-gold-bright:var(--t-gold); --ds-gold:var(--t-gold); --nv-gold:var(--t-gold);
--r-gold:var(--t-gold); --accent:var(--t-gold); --accent-bright:var(--t-gold);
}
/* Intitulés Personne A / B : lisibles, et plus de pattern eyebrow */
html[data-theme="light"] .fam-person-label,
html[data-theme="light"] .cma-person-card legend,
html[data-theme="light"] .syn-person-label{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 1.05rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--t-ink-strong) !important;
background: var(--t-paper) !important;
padding: 0 0.55rem !important;
opacity: 1 !important;
}
/* Symbole central : l'or du site, pas ce jaune. Et son étiquette mono dégage. */
html .fam-amp-symbol{ color: var(--t-gold-bright) !important; }
html .fam-amp-label{ display: none !important; }
/* ============================================================
v93.3.14 — TOUS LES CALCULATEURS ADOPTENT LA MISE EN PAGE
DU CALCULATEUR « MON THÈME » (référence validée)
------------------------------------------------------------
Référence : #birth-form / .theme-form-card = carte blanche,
filet doré fin, labels sans-serif en casse normale encre foncée,
champs blancs bordés, CTA or plein.
Les autres formulaires étaient traités en îlots navy. On les
ramène sur le même modèle, et on remet leurs variables de texte
en encre foncée (elles étaient re-forcées en clair dans l'îlot).
============================================================ */
html[data-theme="light"] .trinite-form,
html[data-theme="light"] .syn-form,
html[data-theme="light"] .cma-form,
html[data-theme="light"] .fam-form,
html[data-theme="light"] .tla-form,
html[data-theme="light"] .ra-form,
html[data-theme="light"] .bsm-form,
html[data-theme="light"] .auth-form{
background: var(--t-surface) !important;
background-image: none !important;
border: 1px solid rgba(201,162,76,0.28) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 2.5vw, 1.8rem) !important;
color: var(--t-ink-strong) !important;
}
/* Variables de texte remises en encre foncée dans ces formulaires */
html[data-theme="light"] .trinite-form,
html[data-theme="light"] .syn-form,
html[data-theme="light"] .cma-form,
html[data-theme="light"] .fam-form,
html[data-theme="light"] .tla-form,
html[data-theme="light"] .ra-form,
html[data-theme="light"] .bsm-form,
html[data-theme="light"] .auth-form,
html[data-theme="light"] .fam-person-card,
html[data-theme="light"] .cma-person-card,
html[data-theme="light"] .syn-person-card{
--nv-cream:var(--t-ink-strong); --cream:var(--t-ink-strong); --white:var(--t-ink-strong);
--nv-cream-mute:rgba(26,23,18,0.64); --nv-cream-faint:rgba(26,23,18,0.45);
--white-dim:rgba(26,23,18,0.74); --white-mute:rgba(26,23,18,0.55);
--ds-text:var(--t-ink-strong); --ds-text-bright:var(--t-ink-strong);
--ds-text-dim:rgba(26,23,18,0.66); --ds-text-mute:rgba(26,23,18,0.55);
--lx-ink:var(--t-ink-strong); --lx-ink-95:rgba(26,23,18,0.95); --lx-ink-85:rgba(26,23,18,0.85);
--lx-ink-8:rgba(26,23,18,0.8); --lx-ink-78:rgba(26,23,18,0.78); --lx-ink-75:rgba(26,23,18,0.75);
--lx-ink-7:rgba(26,23,18,0.7); --lx-ink-65:rgba(26,23,18,0.65); --lx-ink-6:rgba(26,23,18,0.6);
--lx-ink-55:rgba(26,23,18,0.55); --lx-ink-5:rgba(26,23,18,0.5);
--ds-gold-bright:var(--t-gold); --ds-gold:var(--t-gold); --nv-gold:var(--t-gold);
--r-gold:var(--t-gold); --accent:var(--t-gold); --accent-bright:var(--t-gold);
}
/* Colonnes personne : transparentes dans la carte blanche, filet doré */
html[data-theme="light"] .fam-person-card,
html[data-theme="light"] .cma-person-card,
html[data-theme="light"] .syn-person-card{
background: transparent !important;
background-image: none !important;
border: 1px solid rgba(201,162,76,0.22) !important;
color: var(--t-ink-strong) !important;
}
html[data-theme="light"] .cma-person-card[data-person="b"]{
border-left: 3px solid rgba(138,106,47,0.55) !important;
}
html[data-theme="light"] .cma-person-card[data-person="a"]{
border-left: 3px solid var(--t-gold-bright) !important;
}
/* Labels : sans-serif, casse normale, encre foncée (comme Mon thème) */
html[data-theme="light"] :is(.trinite-form,.syn-form,.cma-form,.fam-form,.tla-form,.ra-form,.bsm-form) label,
html[data-theme="light"] :is(.trinite-form,.syn-form,.cma-form,.fam-form,.tla-form,.ra-form,.bsm-form) legend,
html[data-theme="light"] .fam-person-label,
html[data-theme="light"] .cma-person-card legend,
html[data-theme="light"] .syn-person-label{
font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
color: var(--t-ink-strong) !important;
background: transparent !important;
opacity: 1 !important;
}
/* Onglets Saisir / Charger : casse normale, or sombre */
html[data-theme="light"] .fam-source-tab{
font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
font-size: 0.95rem !important;
color: rgba(26,23,18,0.55) !important;
}
html[data-theme="light"] .fam-source-tab.is-active{
color: var(--t-ink-strong) !important;
border-bottom-color: var(--t-gold-bright) !important;
}
/* Aides et notes de formulaire : encre atténuée, plus de mono clair */
html[data-theme="light"] :is(.trinite-form,.syn-form,.cma-form,.fam-form,.tla-form,.ra-form,.bsm-form) .form-hint,
html[data-theme="light"] :is(.trinite-form,.syn-form,.cma-form,.fam-form,.tla-form,.ra-form,.bsm-form) .cn-form-hint,
html[data-theme="light"] :is(.trinite-form,.syn-form,.cma-form,.fam-form,.tla-form,.ra-form,.bsm-form) small{
color: rgba(26,23,18,0.55) !important;
}
/* La phrase de réassurance sous le CTA, sur fond blanc désormais */
html[data-theme="light"] .fam-form-foot,
html[data-theme="light"] .cma-form-foot,
html[data-theme="light"] .syn-form-foot{ color: rgba(26,23,18,0.6) !important; }
/* Formulaires imbriqués dans une carte déjà claire (compte) : pas de carte
dans la carte, juste le texte en encre foncée. */
html[data-theme="light"] .account-form{
background: transparent !important;
background-image: none !important;
border: none !important;
padding: 0 !important;
color: var(--t-ink-strong) !important;
--nv-cream:var(--t-ink-strong); --cream:var(--t-ink-strong); --white:var(--t-ink-strong);
--ds-text:var(--t-ink-strong); --ds-text-bright:var(--t-ink-strong);
--ds-text-dim:rgba(26,23,18,0.66); --ds-text-mute:rgba(26,23,18,0.55);
--lx-ink:var(--t-ink-strong); --ds-gold-bright:var(--t-gold); --r-gold:var(--t-gold);
}
html[data-theme="light"] .account-form label{
font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
color: var(--t-ink-strong) !important;
}
/* ============================================================
v93.3.16 — Synastrie : cartes blanches + roue enfin lisible
------------------------------------------------------------
Les fonds rgba(15,20,40,...) codés en dur viraient au gris sur
le crème. La roue restait à 300px (taille par défaut d'un SVG
sans width) parce que son conteneur est un enfant flex centré
qui ne s'étirait pas : align-self stretch + width 100%.
============================================================ */
html[data-theme="light"] .syn-wheel-container,
html[data-theme="light"] .syn-score-card,
html[data-theme="light"] .syn-key-item{
background: var(--t-surface) !important;
background-image: none !important;
border-color: rgba(201,162,76,0.28) !important;
color: var(--t-ink-strong) !important;
box-shadow: none !important;
--lx-ink:var(--t-ink-strong); --lx-ink-85:rgba(26,23,18,0.85); --lx-ink-8:rgba(26,23,18,0.8);
--lx-ink-78:rgba(26,23,18,0.78); --lx-ink-75:rgba(26,23,18,0.75);
--lx-ink-65:rgba(26,23,18,0.65); --lx-ink-6:rgba(26,23,18,0.6); --lx-ink-55:rgba(26,23,18,0.55);
--ds-text:var(--t-ink-strong); --ds-text-dim:rgba(26,23,18,0.70); --ds-text-mute:rgba(26,23,18,0.55);
--white:var(--t-ink-strong); --cream:var(--t-ink-strong); --nv-cream:var(--t-ink-strong);
--accent:var(--t-gold); --accent-bright:var(--t-gold); --r-gold:var(--t-gold); --ds-gold-bright:var(--t-gold);
}
html[data-theme="light"] .syn-key-item{ border-left: 3px solid var(--t-gold-bright) !important; }
html[data-theme="light"] .syn-key-item.is-tense{ border-left-color: rgba(168,46,24,0.6) !important; }
html[data-theme="light"] .syn-verdict-text,
html[data-theme="light"] .syn-key-item p{ color: rgba(26,23,18,0.75) !important; }
html[data-theme="light"] .syn-verdict-label.sn-verdict-neutral,
html[data-theme="light"] .syn-verdict-label{
background: rgba(201,162,76,0.16) !important;
color: var(--t-gold-deep) !important;
}
/* Roue de synastrie : pleine largeur du bloc */
html .syn-wheel-section,
html .syn-wheel-section.cn-wheel-wrap{
max-width: 1120px !important;
align-items: stretch !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html .syn-wheel-head,
html .syn-wheel-legend{ align-self: center !important; }
html .syn-wheel-container{
width: 100% !important;
align-self: stretch !important;
display: block !important;
padding: clamp(0.8rem, 2vw, 2rem) !important;
}
html .syn-wheel-container svg,
html .syn-wheel-container .natal-wheel{
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
}
/* ============================================================
v94.0.1 — Dernier eyebrow du site : le chargeur de profil.
« CHARGER UN PROFIL ENREGISTRÉ » et « CHOISIR UN PROFIL »
étaient en mono majuscules interlettré. Requalifiés en sérif
casse normale. Le libellé porte une information, il reste ;
c'est le motif eyebrow qui disparaît.
============================================================ */
.pl-summary,
.pl-summary-label,
.pl-select-label{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
font-size: 0.98rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
html[data-theme="light"] .pl-summary,
html[data-theme="light"] .pl-summary-label{ color: var(--t-ink-strong) !important; }
html[data-theme="light"] .pl-select-label{ color: rgba(26,23,18,0.62) !important; }
html[data-theme="light"] .pl-summary-glyph{ color: var(--t-gold) !important; }
/* ============================================================
v94.0.2 — Vue 3D : l'interface passe en clair.
Le ciel étoilé reste noir, c'est une scène, pas un fond de page.
Tout le châssis (panneau, boutons, cartes) suit la règle du site.
============================================================ */
html[data-theme="light"] .three-sidebar{
background: var(--t-surface) !important;
background-image: none !important;
border-right: 1px solid var(--t-gold-35) !important;
box-shadow: none !important;
color: var(--t-ink) !important;
--lx-ink: var(--t-ink);
--lx-ink-85: var(--t-ink-74); --lx-ink-75: var(--t-ink-74);
--lx-ink-65: var(--t-ink-55); --lx-ink-6: var(--t-ink-55); --lx-ink-55: var(--t-ink-55);
--ds-text: var(--t-ink); --ds-text-bright: var(--t-ink);
--ds-text-dim: var(--t-ink-74); --ds-text-mute: var(--t-ink-55);
--r-gold: var(--t-gold); --ds-gold-bright: var(--t-gold);
--lx-goldink-7: var(--t-gold); --lx-goldink-22: var(--t-gold-35);
}
html[data-theme="light"] .three-sidebar .three-title,
html[data-theme="light"] .three-sidebar .three-title em,
html[data-theme="light"] .three-sidebar .three-back{ color: var(--t-ink) !important; }
html[data-theme="light"] .three-sidebar .three-back:hover{ color: var(--t-gold) !important; }
html[data-theme="light"] .three-sidebar .three-section-label{ color: var(--t-ink-55) !important; }
html[data-theme="light"] .three-sidebar .three-hint{ color: var(--t-ink-55) !important; }
html[data-theme="light"] .three-sidebar .three-sep{
background: linear-gradient(90deg, transparent, var(--t-gold-35), transparent) !important;
}
html[data-theme="light"] ul.three-planet-list li{ color: var(--t-ink) !important; }
html[data-theme="light"] ul.three-planet-list li:hover{ background: var(--t-ink-05) !important; }
/* Le libellé « Charger un autre thème » n'est plus un eyebrow */
.three-load-label{
display: block;
font-family: var(--serif, 'Fraunces', serif);
font-style: italic;
font-size: 0.95rem;
letter-spacing: 0;
text-transform: none;
margin-bottom: 6px;
}
html[data-theme="light"] .three-load-label{ color: var(--t-ink-55) !important; }
/* Cartes de dominantes du panneau */
html[data-theme="light"] #three-results .r-dom-card{
background: var(--t-ink-05) !important;
border-color: var(--t-gold-35) !important;
}
html[data-theme="light"] #three-results .r-dom-card-value{ color: var(--t-ink) !important; }
html[data-theme="light"] #three-results .r-dom-card-sub{ color: var(--t-gold) !important; }
/* Le libellé de carte quitte le mono majuscules */
html[data-theme="light"] #three-results .r-dom-card-label{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
font-size: 0.78rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--t-ink-55) !important;
}
/* Boutons flottants au-dessus du ciel : pastilles claires */
html[data-theme="light"] .three-fab{
background: var(--t-surface) !important;
border-color: var(--t-gold-35) !important;
color: var(--t-ink) !important;
}
html[data-theme="light"] .three-fab:hover,
html[data-theme="light"] .three-fab.is-on{
background: var(--t-gold-bright) !important;
border-color: var(--t-gold-bright) !important;
color: var(--t-on-gold) !important;
}
/* Poignée du panneau en mobile */
html[data-theme="light"] .three-sheet-handle{
background: var(--t-surface) !important;
color: var(--t-ink) !important;
border-color: var(--t-gold-35) !important;
}
/* Panneau d'interprétations 3D : cartes claires, fondu clair, plus de gris */
html[data-theme="light"] #three-results .r-planet{
background: var(--t-surface) !important;
border-color: var(--t-gold-35) !important;
color: var(--t-ink) !important;
}
html[data-theme="light"] #three-results .r-planet-name,
html[data-theme="light"] #three-results .r-interp-body{ color: var(--t-ink) !important; }
html[data-theme="light"] #three-results .r-interp-body strong{ color: var(--t-ink) !important; font-weight: 600; }
html[data-theme="light"] #three-results .r-interp-title{ color: var(--t-gold) !important; }
/* Le fondu de troncature suivait le bleu nuit : il suit maintenant la carte */
html[data-theme="light"] #three-results .r-clamp::after{
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--t-surface) 100%) !important;
}
/* « Voir plus » : plus un eyebrow mono majuscules */
html[data-theme="light"] #three-results .r-clamp-toggle{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
font-size: 0.86rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--t-gold) !important;
}
html[data-theme="light"] #three-results .r-clamp-toggle:hover{ color: var(--t-gold-deep) !important; }
/* Retour au thème : phrase, pas étiquette */
html[data-theme="light"] .three-back{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: 0.95rem !important;
}
/* ============================================================
v94.0.4 — Audit visuel : contrastes et derniers eyebrows
------------------------------------------------------------
Défauts trouvés en mesurant les styles calculés page par page,
pas en devinant. Les couleurs d'éléments avaient été réglées
pour un fond sombre : sur crème, l'Air tombait à 1.5 de
contraste, illisible. Les liens dorés plafonnaient à 3.8.
============================================================ */
/* Couleurs d'éléments : lisibles sur le crème */
html[data-theme="light"] .element-feu,
html[data-theme="light"] .zodiac-nav-glyph.element-feu,
html[data-theme="light"] .celebs-sign-header.element-feu{ color: var(--t-el-feu) !important; }
html[data-theme="light"] .element-terre,
html[data-theme="light"] .zodiac-nav-glyph.element-terre,
html[data-theme="light"] .celebs-sign-header.element-terre{ color: var(--t-el-terre) !important; }
html[data-theme="light"] .element-air,
html[data-theme="light"] .zodiac-nav-glyph.element-air,
html[data-theme="light"] .celebs-sign-header.element-air{ color: var(--t-el-air) !important; }
html[data-theme="light"] .element-eau,
html[data-theme="light"] .zodiac-nav-glyph.element-eau,
html[data-theme="light"] .celebs-sign-header.element-eau{ color: var(--t-el-eau) !important; }
html[data-theme="light"]{
--grim-feu: var(--t-el-feu); --grim-terre: var(--t-el-terre); --grim-eau: var(--t-el-eau);
}
/* Liens dorés en petit corps : l'or clair passait sous la norme (3.8) */
html[data-theme="light"] .grimoire-pillar-cta,
html[data-theme="light"] .gr-cta-link,
html[data-theme="light"] .pr-price-badge,
html[data-theme="light"] .bsm-upsell-eyebrow{ color: var(--t-gold-deep) !important; }
/* Derniers eyebrows du site : requalifiés, jamais supprimés quand ils informent */
.v5-nav-submenu-group,
.footer-col-label,
.celebs-search-label,
.bsm-upsell-eyebrow,
.gr-rating-count{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
font-size: 0.92rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
html[data-theme="light"] .v5-nav-submenu-group,
html[data-theme="light"] .footer-col-label{ color: var(--t-ink-55) !important; }
html[data-theme="light"] .gr-rating-count{ color: var(--t-ink-74) !important; }
/* Onglets de connexion : casse normale */
.auth-tab{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: 0.98rem !important;
}
/* ============================================================
v94.0.5 — Page célébrités : 68 706 nœuds dans le DOM.
Le navigateur peignait 5 330 cartes, y compris celles hors écran.
content-visibility laisse le navigateur ignorer le rendu de ce
qui n'est pas visible. Aucun changement de HTML, aucun risque
de référencement : le contenu reste dans le document.
============================================================ */
.celeb-card,
.celebs-sign-section{
content-visibility: auto;
}
.celeb-card{ contain-intrinsic-size: auto 320px; }
.celebs-sign-section{ contain-intrinsic-size: auto 1200px; }
/* ============================================================
v94.0.6 — Roue : les réglages techniques se replient.
Lilith et les aspects mineurs ne sont plus cochés d'emblée :
la ligne de rappel du label « Lilith Moyenne » sortait du cadre
de la roue (1709px pour un viewBox de 1152). Lecture épurée,
options disponibles d'un clic. Ça fait cabinet, pas laboratoire.
============================================================ */
.wheel-params-details{ margin-top: .6rem; }
.wheel-params-summary{
cursor: pointer;
list-style: none;
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--serif, 'Fraunces', serif);
font-style: italic; font-size: .95rem;
letter-spacing: 0; text-transform: none;
}
.wheel-params-summary::-webkit-details-marker{ display: none; }
.wheel-params-summary::after{ content: "▾"; font-size: .8em; transition: transform .18s; }
.wheel-params-details[open] .wheel-params-summary::after{ transform: rotate(180deg); }
html[data-theme="light"] .wheel-params-summary{ color: var(--t-gold-deep); }
html[data-theme="light"] .wheel-params-hint{ color: var(--t-ink-55); }
.wheel-params-details .wheel-params-grid{ margin-top: .9rem; }
/* Derniers eyebrows repérés à l'écran : les libellés « Soleil / Lune » et la
réserve « approchée » du bandeau des luminaires. Requalifiés en sérif. */
.big-3-label,
.big-3-value small{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: 0.92rem !important;
}
html[data-theme="light"] .big-3-label{ color: var(--t-ink-55) !important; }
html[data-theme="light"] .big-3-value small{ color: var(--t-gold-deep) !important; }
/* Bandeau de naissance des fiches célébrités : les intitulés Date / Heure /
Lieu quittent le mono majuscules interlettré. */
.celeb-birth-label{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: 0.85rem !important;
margin-right: .45rem;
}
html[data-theme="light"] .celeb-birth-label{ color: var(--t-ink-55) !important; }
/* Bandeau des trois luminaires : « Maison 1 », « Maisons Placidus », « approchée »
étaient en mono majuscules interlettré. Requalifiés, sur tout le site. */
.big-3-house,
.big-3-disclaim{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: 0.86rem !important;
}
html[data-theme="light"] .big-3-house{ color: var(--t-ink-55) !important; }
html[data-theme="light"] .big-3-disclaim{ color: var(--t-gold-deep) !important; }
/* ============================================================
v94.2.0 — Fiches célébrités horodatées : la source s'affiche.
Cotation honnête : « BC » quand l'heure est rattachée à un acte
de naissance, « ? » quand elle n'est pas encore recoupée.
Aucune cotation inventée.
============================================================ */
.fx-rodden{ display:inline-flex; align-items:baseline; gap:.45rem; }
.fx-rodden-code{
font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.04em;
background:var(--t-gold-bright); color:var(--t-on-gold);
padding:2px 6px; border-radius:2px; cursor:help;
}
html[data-theme="light"] .fx-rodden-code[title*="niveau 5"]{
background:transparent; color:var(--t-gold-deep);
border:1px solid var(--t-gold-35);
}
.fx-rodden-src{
font-family:var(--serif,'Fraunces',serif); font-style:italic; font-size:.86rem;
text-decoration:none; border-bottom:1px solid var(--t-gold-35);
}
html[data-theme="light"] .fx-rodden-src{ color:var(--t-gold-deep); }
.celeb-birth-caveat{
margin:.7rem 0 0; font-family:var(--serif,'Fraunces',serif); font-style:italic;
font-size:.9rem; line-height:1.5;
}
html[data-theme="light"] .celeb-birth-caveat{ color:var(--t-ink-74); }
.celeb-birth-credit{
margin:.5rem 0 0; font-family:var(--serif,'Fraunces',serif); font-style:italic; font-size:.8rem;
}
html[data-theme="light"] .celeb-birth-credit{ color:var(--t-ink-55); }
html[data-theme="light"] .celeb-birth-credit a{ color:var(--t-gold-deep); }
/* Libellés des cartes de dominantes : « Planète dominante », « Signe dominant »,
« Binaire », « Ternaire », « Quaternaire ». Plus de mono majuscules. */
.dominantes-card-label{
font-family: var(--serif, 'Fraunces', serif) !important;
font-style: italic !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: 0.88rem !important;
}
html[data-theme="light"] .dominantes-card-label{ color: var(--t-ink-55) !important; }
/* ============================================================
v94.2.3 — Bloc éditorial des fiches célébrités.
Zéro chapeau : le texte commence par sa première phrase.
============================================================ */
.fx-edito{ margin: clamp(2rem,5vh,3.4rem) auto clamp(1.6rem,4vh,2.6rem); }
.fx-edito-body p{
font-family: 'Hanken Grotesk', system-ui, sans-serif;
font-size: 1.02rem; line-height: 1.75;
margin: 0 0 1.1rem; max-width: 66ch;
}
html[data-theme="light"] .fx-edito-body p{ color: var(--t-ink-74); }
.fx-edito-body p:first-child::first-letter{
font-family: var(--serif, 'Fraunces', serif);
font-size: 3.1rem; line-height: .82; float: left;
padding: .08em .12em 0 0;
}
html[data-theme="light"] .fx-edito-body p:first-child::first-letter{ color: var(--t-gold); }
.fx-edito-sign{
font-family: var(--serif,'Fraunces',serif); font-style: italic; margin-top: 1.4rem;
}
html[data-theme="light"] .fx-edito-sign{ color: var(--t-gold-deep); }
/* ============================================================
v94.9.3 · SKIP-LINK — correctif d'une régression que j'ai causée
============================================================
En v94.8.0 j'ai ajouté « Aller au contenu principal » en premier
enfant du d'index.html (audit accessibilité : au clavier il
fallait une vingtaine de tabulations pour atteindre le contenu).
La position est juste, et sa cible #main-content existe.
Mais .skip-link n'est stylé que dans style.css et
accessibility-v90-25.css — or la home ne charge NI l'un NI l'autre :
elle se limite à tokens-canonical-v94.css + refonte-v92.5.css. Sans
règle, le lien retombait en flux normal, bien visible sous la nav.
La règle vit donc désormais ici, dans la feuille que TOUTES les pages
chargent. Hors focus il sort du cadre par le haut ; au clavier il
descend. Volontairement sans mono/uppercase/letter-spacing large :
la doctrine zéro-eyebrow s'applique aussi à ce qui est peu visible.
============================================================ */
.skip-link{
position: absolute;
top: -80px;
left: 1rem;
z-index: 9999;
padding: 0.7rem 1.1rem;
border-radius: 0;
font-family: var(--serif,'Fraunces',serif);
font-size: 0.95rem;
text-decoration: none;
background: var(--r-bg, #FAF8F4);
color: var(--r-fg, #16130E);
border: 1px solid var(--r-gold-deep, #6E521F);
transition: top 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
top: 1rem;
outline: 2px solid var(--r-gold-deep, #6E521F);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
.skip-link{ transition: none; }
}
/* ============================================================
v94.9.3 · CIEL DU JOUR — décalage de dates
============================================================
Onze crans de −30 à +30 jours. Pas de mono uppercase ni de
letter-spacing large : doctrine zéro-eyebrow, y compris sur des
contrôles. La date cible est en Fraunces italique, comme le reste
de la voix éditoriale du site.
============================================================ */
/* v94.9.7 — les commandes vivent DANS le cadre de la roue
(#wheel-birth-info), sous la date que le moteur affiche déjà :
la date dupliquée et la ligne de cumul ont disparu avec leur
section (.cdj-offsets-section, .cdj-date-line, .cdj-cumul-line). */
/* v94.9.9 — La maquette validée est CENTRÉE : date en grand, réglette
dessous, un seul axe. Or #wheel-birth-info est un flex ROW : il a mis
les commandes À CÔTÉ de la date, pas dessous — date à gauche, réglette
à droite, un vide au milieu. Rien ne le disait dans le CSS des
commandes ; il fallait le voir rendu (recette au navigateur, Stéphane :
« on est loin de l'architecture belle »). On repasse le cadre en
colonne, sur cette page seulement. */
body.page-ciel-du-jour #wheel-birth-info{
flex-direction: column !important;
align-items: center !important;
gap: 0.35rem !important;
padding: 1.4rem 1.25rem !important;
}
/* La date devient le sujet du cadre : Fraunces italique, comme la voix
du site. Le pointillé se décolle des jambages. */
body.page-ciel-du-jour #wheel-birth-info .cdj-date-clickable{
font-family: var(--serif,'Fraunces',serif);
font-style: italic;
font-size: clamp(1.15rem, 2.6vw, 1.5rem);
font-weight: 400;
text-underline-offset: 6px;
}
body.page-ciel-du-jour #wheel-birth-info .birth-coords{
font-size: 0.8rem;
}
.cdj-controls{
width: 100%;
margin-top: 0.5rem;
padding-top: 0.9rem;
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
}
.cdj-scrub{
display: flex;
align-items: stretch;
justify-content: center;
gap: 0.5rem;
}
.cdj-arrow{
min-width: 52px;
min-height: 48px;
border: 1px solid rgba(110, 82, 31, 0.32);
border-radius: 0;
background: transparent;
color: var(--r-gold-deep, #6E521F);
font-family: var(--serif,'Fraunces',serif);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
}
.cdj-arrow:hover{
border-color: var(--r-gold-deep, #6E521F);
background: rgba(110, 82, 31, 0.06);
}
.cdj-arrow:active{
background: var(--r-gold-deep, #6E521F);
color: var(--r-bg, #FAF8F4);
}
.cdj-arrow:focus-visible{
outline: 2px solid var(--r-gold-deep, #6E521F);
outline-offset: 2px;
}
.cdj-units{
display: flex;
border: 1px solid rgba(110, 82, 31, 0.32);
}
.cdj-unit-btn{
min-height: 48px;
padding: 0 1rem;
border: none;
border-radius: 0;
background: transparent;
color: var(--r-fg, #16130E);
font-family: var(--serif,'Fraunces',serif);
font-size: 0.95rem;
cursor: pointer;
touch-action: manipulation;
}
.cdj-unit-btn + .cdj-unit-btn{
border-left: 1px solid rgba(110, 82, 31, 0.22);
}
/* L'unité active ne repose pas que sur la couleur : fond plein. */
.cdj-unit-btn.is-on{
background: var(--r-gold-deep, #6E521F);
color: var(--r-bg, #FAF8F4);
font-weight: 500;
}
.cdj-unit-btn:focus-visible{
outline: 2px solid var(--r-gold-deep, #6E521F);
outline-offset: -2px;
}
/* « Maintenant » respire sous la réglette sans s'en détacher. */
.cdj-foot{
margin-top: 0.7rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.6rem;
}
.cdj-picker{
min-height: 44px;
padding: 0.4rem 0.7rem;
border: 1px solid rgba(110, 82, 31, 0.32);
border-radius: 0;
background: var(--t-surface, #FFFFFF);
color: var(--r-fg, #16130E);
font-family: var(--serif,'Fraunces',serif);
font-size: 0.95rem;
}
/* La date du cadre devient un bouton de saut direct : l'affordance
doit se voir sans dénaturer la typo — soulignement pointillé or. */
.cdj-date-clickable{
cursor: pointer;
text-decoration: underline dotted rgba(110, 82, 31, 0.55);
text-underline-offset: 4px;
}
.cdj-date-clickable:hover{
text-decoration-color: var(--r-gold-deep, #6E521F);
}
/* « Réglages d'affichage » toujours déplié sur le Ciel du jour :
le volet est forcé open par le JS après chaque rendu, et le summary
cesse d'être un interrupteur (chevron masqué, clic neutralisé). */
body.page-ciel-du-jour .wheel-params-details > summary{
pointer-events: none;
cursor: default;
list-style: none;
}
body.page-ciel-du-jour .wheel-params-details > summary::-webkit-details-marker,
body.page-ciel-du-jour .wheel-params-details > summary::marker{
display: none;
content: '';
}
.cdj-offset-btn{
/* 44px : zone de touche confortable au doigt (WCAG 2.5.5) */
min-height: 44px;
min-width: 44px;
padding: 0.55rem 0.9rem;
border: 1px solid rgba(110, 82, 31, 0.32);
border-radius: 0;
background: transparent;
color: var(--r-fg, #16130E);
font-family: var(--serif,'Fraunces',serif);
font-size: 0.92rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
touch-action: manipulation;
}
.cdj-offset-btn:hover{
border-color: var(--r-gold-deep, #6E521F);
background: rgba(110, 82, 31, 0.06);
}
.cdj-offset-btn:focus-visible{
outline: 2px solid var(--r-gold-deep, #6E521F);
outline-offset: 2px;
}
/* v94.9.4 — Les crans sont cumulatifs : ce sont des gestes, pas des
destinations. Aucun n'est donc « actif ». L'état vit dans la date et
le décalage affichés au-dessus. */
.cdj-offset-btn:disabled{
opacity: 0.35;
cursor: default;
}
.cdj-offset-btn:disabled:hover{
border-color: rgba(110, 82, 31, 0.32);
background: transparent;
}
/* Le retour à zéro n'est pas un cran : fond plein pour le distinguer
des déplacements, et il s'éteint quand on est déjà sur aujourd'hui. */
.cdj-reset-btn{
margin-left: 0.4rem;
background: var(--r-gold-deep, #6E521F);
border-color: var(--r-gold-deep, #6E521F);
color: var(--r-bg, #FAF8F4);
}
.cdj-reset-btn:hover:not(:disabled){
background: var(--r-fg, #16130E);
border-color: var(--r-fg, #16130E);
}
.cdj-reset-btn:disabled{
background: transparent;
color: var(--r-fg, #16130E);
}
@media (prefers-reduced-motion: reduce){
.cdj-offset-btn{ transition: none; }
}
@media (max-width: 560px){
.cdj-unit-btn{ padding: 0 0.7rem; font-size: 0.88rem; }
}
/* ============================================================
v94.10.0 — CIEL DU JOUR · PANNEAU D'ACTIONS
Synastrie avec un thème · Charger une ville (js/ciel-du-jour-actions.js)
Palette --t-* uniquement, thème clair. Le panneau prolonge la rangée de
boutons : mêmes angles vifs, même filet, même or que la réglette.
============================================================ */
.cdj-panel{
margin: 1.25rem auto 0;
max-width: 640px;
padding: 1.5rem 1.4rem;
border: 1px solid var(--t-ink-14, rgba(22,19,14,0.14));
background: var(--t-surface, #FFFFFF);
text-align: left;
}
.cdj-panel[hidden]{ display: none; }
.cdj-panel-title{
margin: 0 0 0.5rem;
font-family: var(--r-serif, 'Fraunces', serif);
font-size: 1.28rem;
font-weight: 500;
line-height: 1.25;
color: var(--t-ink, #16130E);
}
.cdj-panel-note{
margin: 0 0 1rem;
font-size: 0.9rem;
line-height: 1.55;
color: var(--t-ink-74, rgba(22,19,14,0.74));
}
.cdj-panel-loading{
margin: 0;
font-size: 0.92rem;
color: var(--t-ink-55, rgba(22,19,14,0.64));
}
/* L'erreur ne repose pas que sur la couleur : filet à gauche + retrait. */
.cdj-panel-err{
margin: 0.75rem 0 0;
padding-left: 0.75rem;
border-left: 2px solid var(--t-el-feu, #B34A18);
font-size: 0.9rem;
line-height: 1.5;
color: var(--t-el-feu, #B34A18);
}
.cdj-panel-row{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
}
.cdj-panel-actions{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-top: 1rem;
}
/* v94.11.2 — min-width: 0 n'est pas une précaution, c'est le correctif.
Un élément flex a min-width: auto par défaut : il ne peut pas rétrécir sous
la largeur de son contenu le plus large. Pour un