/* ====== bloc 1/4 — extrait de index.html L4 ====== */
html,body{background:#020617!important;margin:0;padding:0} /* Credits page */
#creditsView .result-card { max-width:640px; text-align:left; }
#creditsView .result-title, #creditsView .result-subtitle { text-align:center; }
@media (max-width:480px) {
}
/* ====== bloc 2/4 — extrait de index.html L75 ====== */
/* =========================================================
/* =========================================================
DIVINIA — PALETTE DE RÉFÉRENCE OFFICIELLE
Source de vérité visuelle :
- Menus
- Tirage 1 carte
- Tirage 3 cartes
IMPORTANT
- Toute nouvelle UI doit repartir de ces couleurs.
- Ne pas inventer de variantes “presque pareilles”.
- Le 5 cartes et les autres modules doivent hériter de cette base.
---------------------------------------------------------
1) FOND GLOBAL DE RÉFÉRENCE
---------------------------------------------------------
background:
radial-gradient(circle at center, #0f1a33 0%, #020617 55%, #000 100%);
---------------------------------------------------------
2) TEXTES DE RÉFÉRENCE
---------------------------------------------------------
--tx-strong: #eef2ff; // titres clairs
--tx-body: #cbd5e1; // texte principal
--tx-soft: #aab4c4; // texte secondaire
--tx-muted: #94a3b8; // texte discret
--text-main: #dbe4f0;
--text-soft: #c4cfde;
--text-muted-2: #aab4c4;
---------------------------------------------------------
3) OR / ACCENTS DE RÉFÉRENCE
---------------------------------------------------------
--gold-main: #e6d282; // or principal Divinia
--gold-soft: #eadb98; // or doux secondaire
Bordures or utilisées :
rgba(230, 210, 130, 0.12)
rgba(230, 210, 130, 0.16)
rgba(230, 210, 130, 0.18)
---------------------------------------------------------
4) SURFACES COMMUNES DE RÉFÉRENCE
---------------------------------------------------------
--surface-main: rgba(9, 15, 28, 0.82);
--surface-soft: rgba(11, 17, 32, 0.72);
--surface-light: rgba(15, 23, 42, 0.58);
--surface-border: rgba(230, 210, 130, 0.12);
--surface-border-strong: rgba(230, 210, 130, 0.18);
--surface-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
---------------------------------------------------------
5) RÉFÉRENCE PREMIUM — TIRAGE 1 CARTE
---------------------------------------------------------
Bloc thème / panneau premium :
background: rgba(6, 10, 18, 0.92);
border: 1px solid rgba(230, 210, 130, 0.16);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.44),
0 0 0 1px rgba(255, 255, 255, 0.02) inset;
Pills internes :
background: rgba(11, 17, 32, 0.82);
border: 1px solid rgba(230, 210, 130, 0.18);
---------------------------------------------------------
6) RÉFÉRENCE STRUCTURELLE — TIRAGE 3 CARTES
---------------------------------------------------------
Wrap cartes résultat :
background:
radial-gradient(circle at top, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
var(--surface-soft);
border: 1px solid var(--surface-border-strong);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.42),
0 0 16px rgba(230, 210, 130, 0.035);
Ombre image carte :
0 0 16px rgba(230, 210, 130, 0.1),
0 14px 34px rgba(0, 0, 0, 0.52);
---------------------------------------------------------
7) RÈGLE PROJET
---------------------------------------------------------
Toute harmonisation future doit partir de :
- ce fond global
- ces surfaces
- ces bordures or
- ces textes
- ces ombres
Si un nouveau module a besoin d’un panneau premium :
-> reprendre d’abord la logique du 1 carte
Si un nouveau module a besoin d’un habillage résultat :
-> reprendre d’abord la logique du 3 cartes
========================================================= */
/* =========================================================
DIVINIA — CSS CLEANUP
Version nettoyée à partir du bloc fourni
Objectif : supprimer les doublons évidents, fusionner les règles,
éviter les réécritures inutiles et clarifier les sections.
========================================================= */
/* =========================================================
VARIABLES / BASE
========================================================= */
body {
--tx-strong: #eef2ff;
--tx-body: #cbd5e1;
--tx-soft: #aab4c4;
--tx-muted: #94a3b8;
--surface-main: rgba(9, 15, 28, 0.82);
--surface-soft: rgba(11, 17, 32, 0.72);
--surface-light: rgba(15, 23, 42, 0.58);
--surface-border: rgba(230, 210, 130, 0.12);
--surface-border-strong: rgba(230, 210, 130, 0.18);
--surface-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
--gold-main: #e6d282;
--gold-soft: #eadb98;
--text-main: #dbe4f0;
--text-soft: #c4cfde;
--text-muted-2: #aab4c4;
margin: 0;
padding: 0;
min-height: 100vh;
background:
radial-gradient(circle at center, #0f1a33 0%, #020617 55%, #000 100%);
color: var(--tx-body);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body::before,
body::after {
content: "";
position: fixed;
inset: -8%;
pointer-events: none;
z-index: 0;
}
body::before {
background:
radial-gradient(circle at 20% 30%, rgba(230, 210, 130, 0.045) 0%, transparent 18%),
radial-gradient(circle at 75% 25%, rgba(96, 165, 250, 0.05) 0%, transparent 22%),
radial-gradient(circle at 60% 75%, rgba(230, 210, 130, 0.03) 0%, transparent 20%);
filter: blur(26px);
animation: diviniaAmbientDrift 24s ease-in-out infinite alternate;
}
body::after {
background-image:
radial-gradient(circle, rgba(255, 220, 140, 0.16) 0.8px, transparent 1.2px),
radial-gradient(circle, rgba(255, 255, 255, 0.08) 0.7px, transparent 1.1px);
background-size: 180px 180px, 260px 260px;
background-position: 0 0, 90px 120px;
opacity: 0.22;
animation: diviniaStarDrift 40s linear infinite;
}
@keyframes diviniaAmbientDrift {
0% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.9;
}
50% {
transform: translate3d(-1.5%, 1%, 0) scale(1.03);
opacity: 1;
}
100% {
transform: translate3d(1.5%, -1%, 0) scale(1.05);
opacity: 0.92;
}
}
@keyframes diviniaStarDrift {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, -18px, 0);
}
}
html,
body {
height: auto;
}
body.is-home-root,
body.is-menu-view {
overflow: hidden;
}
@media (min-width: 768px) {
body.is-menu-view {
overflow: visible;
}
}
body.is-menu-view .app {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 24px;
overflow: visible;
}
body.is-menu-view .daily-quote {
margin-top: 0 !important;
margin-bottom: 24px !important;
padding-top: 0;
}
body.is-menu-view .view.active {
justify-content: center;
align-items: center;
flex: 1;
}
body.is-home-root .app,
body.is-menu-view .app {
padding-top: 24px !important;
}
body.affinite-no-header .brand {
display: none !important;
}
/* =========================================================
INTRO / OVERLAYS
========================================================= */
.intro-overlay {
position: fixed;
inset: 0;
background: #000;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);
}
.intro-overlay video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
/* Masquer les contrôles natifs vidéo (WebView Android) */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-overlay-play-button {
display: none !important;
-webkit-appearance: none;
}
@media (min-aspect-ratio: 16/9) {
.intro-overlay {
background: radial-gradient(circle at center, #111827 0%, #000 70%);
}
.intro-overlay video {
object-fit: contain;
background: #000;
}
}
.portal-overlay {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at center, #0f172a 0%, #020617 50%, #000 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 1;
transition: opacity 0.6s ease, transform 0.6s ease;
padding: 24px;
box-sizing: border-box;
}
.portal-overlay.hidden {
opacity: 0;
pointer-events: none;
transform: scale(1.05);
}
/* =========================================================
APP ROOT / LAYOUT
========================================================= */
.app {
max-width: 960px;
width: 100%;
padding: 24px;
box-sizing: border-box;
position: relative;
opacity: 0;
transition: opacity 0.6s ease;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: visible;
}
.app.visible {
opacity: 1;
}
#appRoot {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
/* Planchette plein-cadre */
body:has(#planchetteView.active) #appRoot {
height: 100vh;
overflow: hidden;
}
body:has(#planchetteView.active) .app {
padding: 0 !important;
height: 100%;
min-height: unset;
overflow: visible; /* visible = l'overlay position:fixed couvre bien tout l'écran */
}
.ambient-particles {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.ambient-particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.55);
border-radius: 50%;
animation: particleRise 14s linear infinite;
opacity: 0;
}
@media (hover: none), (pointer: coarse) {
.ambient-particle {
width: 5px;
height: 5px;
background: rgba(255, 245, 220, 0.72);
box-shadow: 0 0 10px rgba(255, 240, 200, 0.22);
animation-duration: 11s;
}
.ambient-particle:nth-child(1) { left: 8%; }
.ambient-particle:nth-child(2) { left: 18%; }
.ambient-particle:nth-child(3) { left: 31%; }
.ambient-particle:nth-child(4) { left: 46%; }
.ambient-particle:nth-child(5) { left: 62%; }
.ambient-particle:nth-child(6) { left: 79%; }
}
.ambient-particle:nth-child(1) { left: 12%; animation-delay: 0s; }
.ambient-particle:nth-child(2) { left: 28%; animation-delay: 3s; }
.ambient-particle:nth-child(3) { left: 44%; animation-delay: 6s; }
.ambient-particle:nth-child(4) { left: 61%; animation-delay: 1.5s; }
.ambient-particle:nth-child(5) { left: 78%; animation-delay: 4.5s; }
.ambient-particle:nth-child(6) { left: 91%; animation-delay: 7s; }
.ambient-particle:nth-child(7) { left: 14%; animation-delay: 2s; }
.ambient-particle:nth-child(8) { left: 39%; animation-delay: 5s; }
.ambient-particle:nth-child(9) { left: 68%; animation-delay: 8s; }
.ambient-particle:nth-child(10) { left: 88%; animation-delay: 10s; }
#appRoot {
position: relative;
z-index: 1;
}
@keyframes ambientRise {
0% {
transform: translateY(0);
opacity: 0;
}
8% {
opacity: 0.22;
}
50% {
opacity: 0.38;
}
92% {
opacity: 0.16;
}
100% {
transform: translateY(-110vh);
opacity: 0;
}
}
.view {
display: none;
}
.view.active {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
}
body.is-home-root #homeRootView {
justify-content: center;
align-items: center;
margin: 0;
position: relative;
}
@media (max-width: 1024px) {
body:not(.is-home-root):not(.is-menu-view) .app {
padding-top: 104px !important;
}
}
@media (max-width: 768px) {
body:not(.is-home-root):not(.is-menu-view) .app {
padding-top: 96px !important;
}
}
/* =========================================================
TYPOGRAPHY / GLOBAL TEXT
========================================================= */
h1 {
font-size: 1.9rem;
margin-bottom: 0.25rem;
text-align: center;
letter-spacing: 0.06em;
}
.subtitle {
text-align: center;
font-size: 0.9rem;
color: #9ca3af;
margin-bottom: 1.5rem;
}
#numeroCyclesText,
#numeroAffText,
#genericResultFullText,
#affiniteFullText,
#affiniteResultView .result-full-text,
.result-full-text,
.astro-result p {
color: var(--tx-body) !important;
line-height: 1.75 !important;
}
.astro-title,
.result-names,
.field-title,
#affiniteResultView .result-names {
color: var(--tx-strong) !important;
}
.astro-subtitle,
.field-hint,
#affiniteResultView .small-hint {
color: var(--tx-muted) !important;
}
#numeroCyclesText,
#numeroAffText,
#genericResultFullText,
#affiniteFullText {
font-size: 1rem !important;
}
label {
font-size: 0.85rem;
color: #e5e7eb;
display: inline-block;
margin-bottom: 4px;
}
/* =========================================================
TOP BAR / BOUTONS HAUT
========================================================= */
.top-bar {
position: fixed;
top: 16px;
left: 16px;
right: 16px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 3000;
pointer-events: none;
}
.top-bar-left {
min-width: 52px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.top-bar-right {
display: flex;
align-items: center;
gap: 10px;
}
/* ── Popup bonus arcanes ─────────────────────────────────────── */
.bonus-popup-overlay {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
animation: fadeIn 0.3s ease;
}
.bonus-popup-card {
background: linear-gradient(135deg, #1a1025 0%, #2d1b4e 100%);
border: 1px solid rgba(167,139,250,0.4);
border-radius: 20px;
padding: 40px 32px;
text-align: center;
max-width: 320px;
width: 90%;
box-shadow: 0 0 60px rgba(167,139,250,0.25);
animation: slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.bonus-popup-icon {
font-size: 2.8rem; color: #a78bfa;
animation: pulse 1.5s ease-in-out infinite;
margin-bottom: 12px;
}
.bonus-popup-title {
font-size: 1.2rem; font-weight: 700;
color: #e2d9f3; letter-spacing: 0.05em;
margin-bottom: 10px;
}
.bonus-popup-desc {
font-size: 0.9rem; color: #9d8ec0;
margin-bottom: 18px; line-height: 1.5;
}
.bonus-popup-amount {
font-size: 2rem; font-weight: 800;
color: #a78bfa; margin-bottom: 24px;
text-shadow: 0 0 20px rgba(167,139,250,0.5);
}
.bonus-popup-close {
background: linear-gradient(135deg, #7c3aed, #a78bfa);
color: #fff; border: none; border-radius: 50px;
padding: 12px 32px; font-size: 1rem;
cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.bonus-popup-close:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(167,139,250,0.4); }
@keyframes slideUp {
from { transform: translateY(40px) scale(0.9); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* ── Wallet panel (Mon Coffre) ───────────────────────────────── */
/* Plan badge */
/* Balances */
@media (max-width: 400px) { }
/* Grant countdown */
/* Cosmic */
/* FAQ */
/* FAQ section header */
/* Alerte arcanes perdus */
/* Credit mensuel */
/* Wallet status variants */
/* CTA */
/* ── Badge de coût arcane sur les boutons ───────────────────── */
/* Badge inline dans les boutons */
/* Notice de coût pour les grilles de sélection (horoscope, etc.) */
/* Compteur Arcanes */
.top-bar-btn,
.top-bar .top-bar-btn,
.top-bar #globalBackBtn,
.top-bar #muteBtn,
.top-bar #settingsBtn,
.top-home-btn,
#muteBtn,
#settingsBtn {
pointer-events: auto;
border-radius: 999px;
padding: 6px 12px !important;
border: 1px solid #4b5563;
background: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
cursor: pointer;
font-size: 0.85rem !important;
line-height: 1 !important;
transition: 0.2s;
}
.top-bar-btn:hover,
.top-home-btn:hover,
#muteBtn:hover,
#settingsBtn:hover {
border-color: #a855f7;
color: #f9fafb;
}
/* Toggle niveau sonore */
.sound-level-toggle {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.sound-level-btn {
flex: 1;
min-width: 90px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 8px;
border: 1px solid rgba(148,163,184,0.2);
border-radius: 10px;
background: rgba(2,6,23,0.4);
color: rgba(148,163,184,0.6);
font-size: 0.78rem;
cursor: pointer;
transition: all 0.2s ease;
}
.sound-level-btn:first-child { font-size: 1.2rem; }
.sound-level-btn span { font-size: 0.75rem; }
.sound-level-btn.active {
border-color: rgba(167,139,250,0.6);
background: rgba(167,139,250,0.12);
color: rgba(230,210,255,0.95);
}
.sound-level-btn:hover:not(.active) {
border-color: rgba(148,163,184,0.4);
color: rgba(148,163,184,0.9);
}
#musicVolumeRange {
width: 100%;
margin-top: 6px;
accent-color: #a855f7;
cursor: pointer;
}
.back-btn,
#backVibrationRevesBtn {
display: none !important;
}
@media (max-width: 600px) {
.audio-controls {
flex-direction: column;
align-items: flex-end;
}
.top-home-btn {
margin-top: 6px;
}
}
/* =========================================================
BOUTONS / INPUTS / FORMS
========================================================= */
.btn-primary,
.btn-secondary {
border-radius: 999px;
padding: 8px 18px;
font-size: 0.9rem;
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: 0.2s;
}
.btn-primary {
background: rgba(11, 17, 32, 0.92);
color: var(--gold-main);
border: 1px solid rgba(230, 210, 130, 0.24);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.26);
}
.btn-primary:hover {
filter: brightness(1.03);
transform: translateY(-1px);
border-color: rgba(230, 210, 130, 0.42);
box-shadow:
0 0 18px rgba(230, 210, 130, 0.10),
0 14px 30px rgba(0, 0, 0, 0.32);
}
.btn-secondary {
background: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
border-color: #4b5563;
}
.btn-secondary:hover {
border-color: rgba(230, 210, 130, 0.5);
color: var(--gold-main);
}
select {
background: #0b1120;
color: #e5e7eb;
border-radius: 999px;
border: 1px solid rgba(230, 210, 130, 0.28);
padding: 6px 10px;
font-size: 0.85rem;
}
select:focus,
textarea:focus,
.astro-v2-input:focus,
.auth-email-input:focus,
.auth-code-input:focus {
outline: none;
border-color: rgba(230, 210, 130, 0.68);
box-shadow: 0 0 0 1px rgba(230, 210, 130, 0.22);
}
textarea {
width: 100%;
resize: vertical;
min-height: 70px;
max-height: 200px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid #27272a;
background: radial-gradient(circle at top, #020617, #020617 60%, #020617 100%);
color: #e5e7eb;
font-family: inherit;
font-size: 0.9rem;
box-sizing: border-box;
}
textarea::placeholder {
color: #6b7280;
font-style: italic;
}
/* =========================================================
HOME / GRILLES / CARTES
========================================================= */
.home-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.view .home-grid {
margin-top: 40px;
margin-bottom: 40px;
gap: 24px 40px;
}
.home-card {
flex: 0 0 calc(50% - 40px);
max-width: 360px;
border-radius: 18px;
overflow: hidden;
background: radial-gradient(circle at top, #111827, #020617);
border: 1px solid rgba(148, 163, 184, 0.28);
cursor: pointer;
padding: 14px;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75),
0 0 0 rgba(230, 210, 130, 0);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
outline: none;
transition:
transform 0.32s ease,
border-color 0.32s ease,
box-shadow 0.32s ease,
filter 0.32s ease;
}
.home-card:focus,
.home-card:active {
outline: none;
}
.home-card img,
.home-card .home-title,
.home-card .home-desc,
.home-card .root-card-title {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
.home-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 0.32s ease;
box-shadow:
inset 0 0 0 1px rgba(230, 210, 130, 0.18),
0 0 28px rgba(230, 210, 130, 0.10),
0 0 70px rgba(59, 130, 246, 0.06);
}
.home-card:hover {
transform: translateY(-5px) scale(1.015);
border-color: rgba(230, 210, 130, 0.72);
box-shadow:
0 0 18px rgba(230, 210, 130, 0.14),
0 14px 30px rgba(0, 0, 0, 0.88);
}
.home-card:hover::before {
opacity: 1;
}
.home-card:hover img {
filter: drop-shadow(0 0 10px rgba(230, 210, 130, 0.18));
}
.home-card img {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
border-radius: 12px;
margin-bottom: 10px;
display: block;
}
.root-card-inner {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
margin-bottom: 10px;
}
.root-card-inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.home-title,
.root-card-title,
.home-desc {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 10px;
margin-inline: auto;
max-width: 92%;
min-height: 1.2em;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
line-height: 1.25;
color: #d6d3c1 !important;
text-shadow:
0 0 6px rgba(0, 0, 0, 0.85),
0 0 10px rgba(255, 215, 130, 0.15) !important;
}
@media (min-width: 1200px) {
.home-grid {
max-width: 1000px;
gap: 28px 60px;
}
.home-card {
padding: 16px;
max-width: 400px;
}
}
@media (max-width: 768px) {
.view .home-grid {
margin-top: 24px;
margin-bottom: 32px;
gap: 18px 20px;
}
.home-card {
flex: 0 0 calc(50% - 20px);
padding: 10px;
max-width: none;
}
.home-card img {
border-radius: 10px;
}
.audio-controls {
top: 12px;
right: 12px;
}
#vibrationView .home-grid {
gap: 18px 20px;
margin-top: 24px;
margin-bottom: 32px;
}
}
@media (max-width: 480px) {
.top-bar {
top: 10px;
left: 10px;
right: 10px;
}
.top-bar-btn,
.top-bar .top-bar-btn,
.top-bar #globalBackBtn,
.top-bar #muteBtn,
.top-bar #settingsBtn {
padding: 6px 10px !important;
font-size: 0.8rem !important;
}
body.is-home-root .app,
body.is-menu-view .app {
padding: 14px 12px 18px !important;
}
.home-card {
flex: 0 0 calc(50% - 6px);
padding: 7px;
border-radius: 16px;
}
.root-card-inner {
margin-bottom: 10px;
border-radius: 10px;
}
.home-card img,
.root-card-inner img {
border-radius: 10px;
}
.home-title,
.root-card-title,
.home-desc {
margin-top: 6px;
max-width: 96%;
height: 2.2rem;
font-size: 0.82rem;
line-height: 1.15;
letter-spacing: 0.04em;
}
#vibrationView .home-grid {
gap: 12px;
margin-top: 8px;
margin-bottom: 18px;
}
}
/* =========================================================
READING / RESULT BOXES
========================================================= */
/* Hero grid : neutraliser les marges de l'image dans le conteneur overlay */
/* Hero grid wrappers : neutraliser marges/dimensions dans les conteneurs overlay */
#readingHeroWrap img,
#readingHeroWrap video,
[id$="HeroImgWrap"] img,
[id$="HeroImgWrap"] video {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Vidéos astro en position absolue */
#astroHoroscopeHeroImgWrap video,
#astroRelationsHeroImgWrap video,
#astroBioHeroImgWrap video,
#astroProfilHeroImgWrap video {
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
max-width: none !important;
max-height: none !important;
}
/* Override tablette : forcer img wrapper à 100% (double-ID, spécificité 0,2,0,1 > 0,1,1,1) */
#readingHeroImg {
margin-bottom: 60px;
}
#readingTitle {
text-align: center;
width: 100%;
}
.theme-select-hidden {
position: absolute !important;
left: -99999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (max-width: 768px) {
}
.reading::before {
content: none;
}
.reading.loading {
color: #d1d5db;
font-style: italic;
}
.reading.error {
border-color: #f87171;
color: #fca5a5;
}
.threecard-actions-row {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
width: 100%;
}
.threecard-actions-row-main {
flex-wrap: wrap;
}
.threecard-actions-row-back {
margin-top: 2px;
justify-content: center;
}
.reading-actions:not(.threecard-actions) .btn-primary,
.reading-actions:not(.threecard-actions) .btn-secondary,
.reading-actions:not(.threecard-actions) .tarot-back-btn {
margin: 0 !important;
}
/* ✅ Accordéon tirage 1 carte — mobile uniquement */
/* Corps de l'accordéon : caché par défaut sur mobile */
@keyframes accordionFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Desktop/tablette : tout affiché, bouton masqué */
@media (min-width: 768px) {
}
/* Mobile : accordéon avec bouton */
@media (max-width: 767px) {
}
/* =========================================================
CARDS / SPREADS
========================================================= */
.cards-ritual {
display: none;
text-align: center;
font-size: 0.85rem;
color: #facc15;
opacity: 0.85;
margin: 16px 0 10px;
}
/* 7 cartes — légère réduction desktop/tablette */
@media (min-width: 641px) and (max-width: 1024px) {
}
.card {
width: 180px;
max-width: 180px;
text-align: center;
}
.card img {
width: 100%;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.9);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.selected {
transform: translateY(-4px) scale(1.04);
z-index: 5;
position: relative;
}
.card.selected img {
box-shadow:
0 0 16px rgba(212, 175, 55, 0.16),
0 18px 40px rgba(0, 0, 0, 0.85);
}
.card.disabled img {
opacity: 0.24;
filter: blur(1px);
cursor: default;
}
.card-pos {
font-size: 0.78rem;
color: #a5b4fc;
}
@media (min-width: 1025px) {
}
@media (max-width: 1024px) {
.card-meaning,
.card-pos {
display: none;
}
}
@media (min-width: 641px) and (max-width: 1024px) {
.card {
width: 128px;
max-width: 128px;
}
.card img {
border-radius: 9px;
}
}
@media (max-width: 640px) {
.card {
width: 140px;
max-width: 140px;
}
}
@media (max-width: 480px) {
.card {
width: calc(31vw - 10px);
max-width: 95px;
}
/* Spread-5 (tirage en croix) : cartes plus compactes pour que les 3 rangées tiennent à l'écran */
.card img {
border-radius: 8px;
}
.card-pos {
display: none;
}
}
/* =========================================================
ASTRO CLASSIC
========================================================= */
body.is-astro-menu .daily-quote,
body.is-numero-menu .daily-quote {
margin-bottom: 32px;
}
#astroView .home-card:hover {
box-shadow: 0 0 18px rgba(230, 210, 130, 0.25), 0 0 28px rgba(120, 180, 255, 0.15);
transform: scale(1.03);
transition: all 0.35s ease;
}
#astroView .home-card img {
transition: transform 0.35s ease, filter 0.35s ease;
}
#astroView .home-card:hover img {
filter: drop-shadow(0 0 10px rgba(230, 210, 130, 0.35));
}
#astroView .home-label {
display: none;
}
.view.active .astro-wrapper > img:first-of-type,
#readingHeroImg {
margin-top: 16px !important;
}
@media (max-width: 1024px) {
.view.active .astro-wrapper > img:first-of-type,
#readingHeroImg {
margin-top: 5px !important;
}
#numerologyProfileView .astro-wrapper > img:first-of-type,
#numerologyCyclesView .astro-wrapper > img:first-of-type,
#numerologyAffinitiesView .astro-wrapper > img:first-of-type,
#numerologyNamesView .astro-wrapper > img:first-of-type {
max-width: 210px !important;
margin-bottom: 32px !important;
}
}
/* ── Profil de vie — Vue Résultat ── */
/* Constellation */
/* Portrait */
/* CTA 6 dimensions */
/* Grille 6 dimensions */
@media (max-width: 580px) {
}
/* Barre d'actions */
.num-actions-bar .btn-secondary:hover,
.num-actions-bar .btn-secondary:focus-visible {
color: var(--gold-main) !important;
border-color: var(--gold-main) !important;
outline: none !important;
}
#numeroProfileSavedPills .tarot-theme-pill {
background: rgba(6, 10, 20, 0.88) !important;
border: 1px solid rgba(230, 210, 130, 0.35) !important;
color: var(--gold-soft) !important;
border-radius: 999px !important;
padding: 7px 14px 7px 16px !important;
font-size: 0.88rem !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
letter-spacing: 0.02em !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(230,210,130,0.05) !important;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}
#numeroProfileSavedPills .tarot-theme-pill:hover {
background: rgba(230, 210, 130, 0.07) !important;
border-color: rgba(230, 210, 130, 0.6) !important;
box-shadow: 0 0 14px rgba(230, 210, 130, 0.12), 0 4px 14px rgba(0,0,0,0.3) !important;
color: var(--gold-main) !important;
}
@media (max-width: 900px) {
}
@media (max-width: 600px) {
}
/* =========================================================
RESULT GENERIC / AFFINITE
========================================================= */
.result-card {
max-width: 480px;
margin: 20px auto;
padding: 24px 18px;
border-radius: 22px;
background: radial-gradient(circle at top, #111827 0%, #020617 70%);
box-shadow: 0 0 40px rgba(245, 158, 11, 0.35);
text-align: center;
animation: fadeIn 0.7s ease-out;
}
.result-title { font-size: 1.3rem; margin-bottom: 4px; }
.result-subtitle { font-size: 0.9rem; color: #9ca3af; margin-bottom: 12px; }
.result-main-line { font-size: 1.1rem; font-weight: 600; color: #fcd34d; margin-bottom: 4px; }
.result-main-value {
font-size: 2.6rem;
font-weight: 700;
color: #fbbf24;
text-shadow: 0 0 22px rgba(251, 191, 36, 0.6);
margin-bottom: 8px;
}
.result-short-text { font-size: 0.95rem; color: #e5e7eb; margin-bottom: 10px; }
.result-full-text { font-size: 0.95rem; color: #d1d5db; line-height: 1.6; margin-top: 10px; text-align: left; }
.result-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
/* =========================================================
AFFINITÉS – Vue résultat redesignée
========================================================= */
/* Noms */
/* Jauge circulaire */
/* Couleur du cercle selon le score / niveau */
.theme-harmonieuse .aff-ring-arc {
stroke: #34d399;
filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.28));
}
.theme-complementaire .aff-ring-arc {
stroke: #60a5fa;
filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.26));
}
.theme-apprentissage .aff-ring-arc {
stroke: #f59e0b;
filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.24));
}
.theme-karmique .aff-ring-arc {
stroke: #f87171;
filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.24));
}
.theme-harmonieuse #affiniteScore,
.theme-harmonieuse .aff-score-pct {
color: #34d399;
}
.theme-complementaire #affiniteScore,
.theme-complementaire .aff-score-pct {
color: #60a5fa;
}
.theme-apprentissage #affiniteScore,
.theme-apprentissage .aff-score-pct {
color: #f59e0b;
}
.theme-karmique #affiniteScore,
.theme-karmique .aff-score-pct {
color: #f87171;
}
/* Badge niveau */
.theme-harmonieuse .aff-level-badge {
border-color: rgba(52, 211, 153, 0.34);
background: rgba(52, 211, 153, 0.10);
color: #6ee7b7;
}
.theme-complementaire .aff-level-badge {
border-color: rgba(96, 165, 250, 0.34);
background: rgba(96, 165, 250, 0.10);
color: #93c5fd;
}
.theme-apprentissage .aff-level-badge {
border-color: rgba(245, 158, 11, 0.34);
background: rgba(245, 158, 11, 0.10);
color: #fbbf24;
}
.theme-karmique .aff-level-badge {
border-color: rgba(248, 113, 113, 0.34);
background: rgba(248, 113, 113, 0.10);
color: #fca5a5;
}
/* Short text */
/* Actions */
/* Panneau analyse détaillée */
@keyframes affiniteGlowPulse {
0% { text-shadow: 0 0 0 rgba(255,255,255,0); transform: scale(1); }
50% { text-shadow: 0 0 40px rgba(255,255,255,0.55); transform: scale(1.04); }
100% { text-shadow: 0 0 10px rgba(255,255,255,0.15); transform: scale(1); }
}
/* =========================================================
AFFINITÉS – Formulaire duo
========================================================= */
.aff-person-card .astro-v2-input {
margin-bottom: 0;
}
@media (min-width: 600px) {
}
@media (max-width: 599px) {
.aff-person-card .astro-v2-input {
min-height: 48px;
font-size: 0.98rem;
}
}
@media (max-width: 599px) {
}
/* =========================================================
NUMEROLOGIE
========================================================= */
/* ── Cycles date block ── */
/* ── Onglets ── */
/* ── Carte nombres personnels ── */
.numero-cycles-chip,
.numero-chip {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(255, 215, 130, 0.1);
border: 1px solid rgba(255, 215, 130, 0.5);
color: #ffd782;
}
/* ── Trio de chiffres ── */
/* ── Cards interprétation (scope = day) ── */
/* ── Texte interprétation (scope = month/year) ── */
/* ── Fallback texte plain ── */
/* ── Loading / empty ── */
/* ── Chiffres chance inline ── */
/* calendar-section: taille réduite via les propriétés individuelles dans numerology-names.js */
/* ── Bouton calendrier (gold theme) ── */
.numero-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 10px 0 8px;
}
.numero-result-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.numero-result-title {
font-weight: 700;
letter-spacing: 0.3px;
}
.numero-result-actions {
display: flex;
gap: 8px;
}
.numero-mini {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.numero-mini-row {
line-height: 1.6;
}
.numero-details {
margin-top: 10px;
}
.numero-details summary {
cursor: pointer;
opacity: 0.9;
}
.numero-hidden-copy,
.numero-hidden-copy-detail {
position: absolute;
left: -99999px;
top: -99999px;
height: 1px;
width: 1px;
opacity: 0;
}
#numerologyNamesView .numero-tab-content {
display: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
#numerologyNamesView .numero-tab-content.active {
display: block;
opacity: 1;
visibility: visible;
}
#numeroNameResult,
#numeroProjectResult,
#numeroAddressResult {
font-size: 1.1rem;
line-height: 1.8;
color: #d1d5db;
}
#numeroNameResult p,
#numeroProjectResult p,
#numeroAddressResult p {
margin: 10px 0;
text-align: left;
}
#numeroNameResult strong,
#numeroProjectResult strong,
#numeroAddressResult strong {
color: #facc15;
font-weight: 600;
}
#numeroNameResult .bullet,
#numeroProjectResult .bullet,
#numeroAddressResult .bullet {
color: #fde68a;
}
@media (max-width: 1024px) {
#numeroView .home-grid {
margin-top: 16px;
margin-bottom: 10px;
gap: 18px 20px;
align-items: stretch;
}
#numeroView .home-card {
flex: 0 0 calc(50% - 20px);
max-width: none;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
#numeroView .home-card img {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
transform: none; /* important */
display: block;
}
/* zone texte homogène même si une tuile passe sur 2 lignes */
#numeroView .home-desc {
height: 2.2rem;
max-width: 92%;
margin-top: 8px;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.25;
}
.numero-inner-header img {
width: 75%;
height: 75%;
margin-bottom: 10px;
}
}
@media (max-width: 600px) {
.aff-more-btn,
#backAffiniteResultBtn {
width: 100%;
max-width: 280px;
min-width: 0;
}
}
@media (min-width: 769px) {
}
@media (max-width: 600px) {
.numero-lucky-btn {
margin-left: 0;
flex-basis: 100%;
}
}
/* =========================================================
BRAND / PORTAL / AUTH
========================================================= */
.brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 24px 0 8px;
text-align: center;
}
.brand-logo {
width: clamp(90px, 12vw, 110px);
display: block;
margin: 0 auto;
animation: soulFlame 6s ease-in-out infinite;
filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
}
.brand-name {
margin-top: 6px;
font-size: 0.95rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #e5e7eb;
opacity: 0.9;
}
.auth-container,
.portal-container {
width: 100%;
max-width: 420px;
text-align: center;
}
.portal-logo {
font-size: 80px;
margin-bottom: 24px;
animation: portalFloat 4s ease-in-out infinite;
filter: drop-shadow(0 0 30px rgba(230, 210, 130, 0.5));
}
.portal-title {
font-size: 2.2rem;
color: #e6d282;
margin-bottom: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 300;
text-shadow: 0 0 30px rgba(230, 210, 130, 0.4);
}
.portal-subtitle {
color: #9ca3af;
font-size: 1rem;
margin-bottom: 40px;
line-height: 1.6;
font-style: italic;
}
.portal-enter-btn {
position: relative;
padding: 18px 50px;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.1em;
border-radius: 50px;
border: 2px solid rgba(230, 210, 130, 0.6);
background: transparent;
color: #e6d282;
cursor: pointer;
transition: all 0.4s ease;
overflow: hidden;
}
.portal-enter-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(230, 210, 130, 0.2) 0%, rgba(201, 162, 39, 0.1) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.portal-enter-btn:hover {
border-color: #e6d282;
box-shadow: 0 0 40px rgba(230, 210, 130, 0.4), inset 0 0 20px rgba(230, 210, 130, 0.1);
transform: scale(1.05);
}
.portal-enter-btn:hover::before {
opacity: 1;
}
.portal-enter-btn:active {
transform: scale(0.98);
}
.portal-particles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.portal-particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(230, 210, 130, 0.6);
border-radius: 50%;
animation: particleRise 8s linear infinite;
}
.portal-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.portal-particle:nth-child(2) { left: 25%; animation-delay: 1.5s; }
.portal-particle:nth-child(3) { left: 40%; animation-delay: 3s; }
.portal-particle:nth-child(4) { left: 55%; animation-delay: 0.5s; }
.portal-particle:nth-child(5) { left: 70%; animation-delay: 2s; }
.portal-particle:nth-child(6) { left: 85%; animation-delay: 4s; }
/* =========================================================
SPIRIT VOICE / SV ANSWERS
========================================================= */
.sv-answer {
padding: 10px 14px;
border-radius: 10px;
font-weight: 600;
display: inline-block;
text-align: center;
min-width: 120px;
}
.sv-answer-tag {
margin-top: 6px;
font-size: 0.75rem;
opacity: 0.75;
}
.sv-answer-normal {
background: rgba(253, 224, 71, 0.15);
border: 1px solid rgba(253, 224, 71, 0.6);
color: #fde047;
}
.sv-answer-rare {
background: rgba(56, 189, 248, 0.15);
border: 1px solid rgba(56, 189, 248, 0.7);
color: #38bdf8;
}
.sv-answer-pve {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.25), rgba(253, 224, 71, 0.25));
border: 2px solid rgba(253, 224, 71, 0.9);
color: #fde047;
box-shadow:
0 0 12px rgba(253, 224, 71, 0.45),
inset 0 0 8px rgba(220, 38, 38, 0.35);
}
/* =========================================================
PLANCHETTE — VERSION FUSIONNÉE
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
/* ===================================================
PLANCHETTE — REFONTE SPECTRALE
=================================================== */
@media (max-width: 1023px) {
}
/* Cadre — pseudo-élément garanti au-dessus de tout */
/* ── Lumières qui se rallument — état ended ── */
/* Grille runique de fond */
/* Courants de brume froide */
/* Vidéo de fin */
@media (max-width: 1023px) {
}
/* Vignette dynamique */
/* ── Planche obsidienne — plein viewport ── */
/* Coins en L */
/* Halo doré pulsant au hover — zone invisible */
@keyframes planchetteHoverPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* SVG anneaux — invisibles au repos */
/* État actif — s'illumine en violet */
.planchette-circle.active .sigil-ring-outer,
.planchette-state-canalisation .sigil-ring-outer {
stroke: rgba(160, 100, 255, 1);
stroke-opacity: 0.80;
stroke-width: 1.8;
}
.planchette-circle.active .sigil-ring-inner,
.planchette-state-canalisation .sigil-ring-inner {
stroke: rgba(160, 100, 255, 1);
stroke-opacity: 0.65;
stroke-width: 1.2;
}
.planchette-circle.active .sigil-star,
.planchette-state-canalisation .sigil-star {
stroke: rgba(200, 150, 255, 1);
stroke-opacity: 0.75;
stroke-width: 1.4;
}
/* État révélation — or */
.planchette-state-revelation .sigil-ring-outer,
.planchette-state-revelation .sigil-ring-inner,
.planchette-state-revelation .sigil-star {
stroke: rgba(212, 175, 55, 1);
stroke-opacity: 0.70;
}
@keyframes sigilPulse {
0%, 100% { filter: drop-shadow(0 0 8px rgba(130,70,220,0.6)) drop-shadow(0 0 18px rgba(100,50,200,0.3)); }
50% { filter: drop-shadow(0 0 14px rgba(160,100,255,0.9)) drop-shadow(0 0 30px rgba(120,60,240,0.5)); }
}
/* État actif */
/* État révélation */
/* ── Vision du médium ── */
@keyframes visionPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}
@media (max-width: 480px) {
}
/* Séparateur entre voix et interprétation */
/* Medium — calqué sur .reading tarot */
/* ── Planchette — Signes reçus ── */
/* ── Planchette — Nouveau rendu 3 blocs ── */
@media (max-width: 768px) {
}
/* ── Grain pelliculaire overlay médiumnique ── */
/* ═══════════════════════════════════════════════════════
UPGRADE DRAMATIQUE PREMIUM — overlay planchette
═══════════════════════════════════════════════════════ */
/* 1. PHRASE CENTRALE — dominante et lumineuse */
@keyframes phraseLueur {
0%, 100% {
text-shadow:
0 0 35px rgba(212,175,55,0.40),
0 0 70px rgba(212,175,55,0.16);
}
50% {
text-shadow:
0 0 55px rgba(212,175,55,0.68),
0 0 110px rgba(212,175,55,0.28),
0 0 180px rgba(180,140,40,0.14);
}
}
@media (max-width: 768px) {
}
/* 2. LECTURE WRAPPER — séparateur pulsant */
@keyframes sepPulse {
0%, 100% { opacity: 0.55; letter-spacing: 0.28em; }
50% { opacity: 1; letter-spacing: 0.42em; }
}
/* 3. SIGNES REÇUS — micro-rituel précieux */
@keyframes linePulse {
0%, 100% { width: 32px; opacity: 0.5; }
50% { width: 64px; opacity: 1; }
}
/* 4. VISION DU MÉDIUM — objet sacré / apparition */
/* Aura derrière l'image */
@keyframes auraBreathe {
0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }
50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
}
@keyframes visionRespire {
0%, 100% {
box-shadow:
0 0 0 1px rgba(212,175,55,0.10),
0 0 28px rgba(212,175,55,0.22),
0 0 70px rgba(100,50,200,0.16),
0 28px 60px rgba(0,0,0,0.70);
filter: brightness(1);
}
50% {
box-shadow:
0 0 0 1px rgba(212,175,55,0.22),
0 0 50px rgba(212,175,55,0.40),
0 0 110px rgba(120,60,220,0.26),
0 28px 80px rgba(0,0,0,0.80);
filter: brightness(1.06);
}
}
/* 5. CTA — Nouvelle session : noble / Quitter : effacé */
/* 6. VIDE HABITÉ — brume vivante autour du contenu */
@keyframes brumeLente {
0%, 100% {
background:
radial-gradient(ellipse 60% 50% at 20% 20%, rgba(100,50,180,0.06) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 80% 80%, rgba(60,30,140,0.07) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(140,70,200,0.04) 0%, transparent 65%);
}
33% {
background:
radial-gradient(ellipse 70% 55% at 30% 30%, rgba(110,55,190,0.09) 0%, transparent 62%),
radial-gradient(ellipse 45% 65% at 70% 70%, rgba(70,35,160,0.08) 0%, transparent 58%),
radial-gradient(ellipse 55% 45% at 52% 48%, rgba(150,75,210,0.06) 0%, transparent 68%);
}
66% {
background:
radial-gradient(ellipse 55% 45% at 25% 35%, rgba(90,45,170,0.07) 0%, transparent 58%),
radial-gradient(ellipse 50% 55% at 75% 65%, rgba(80,40,150,0.09) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 48% 52%, rgba(130,65,195,0.05) 0%, transparent 70%);
}
}
/* DÉTAIL SIGNATURE — point lumineux pulsant dans le séparateur */
@keyframes etoilePulse {
0%, 100% { opacity: 0.4; transform: scale(0.9); text-shadow: none; }
50% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 12px rgba(212,175,55,0.9), 0 0 24px rgba(212,175,55,0.4); }
}
/* Curseur clignotant typewriter */
@keyframes cursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Zone bouton révélation */
/* Bouton révélation médiumnique */
/* Séparateur ── ☽ ── */
/* Medium caché par défaut, révélé au clic */
/* Disclaimer — sous les phrases, discret mais lisible */
/* instruction opacity during revelation controlled by JS */
/* Tablette portrait uniquement (600–1023px de large) */
@media (min-width: 601px) and (max-width: 1023px) {
}
@media (max-width: 600px) {
}
@media (max-width: 480px) {
}
@media (prefers-reduced-motion: reduce) {
}
/* =========================================================
THREE CARD — DECISION BLOCK
Scoped au tirage 3 cartes uniquement
========================================================= */
@media (max-width: 640px) {
}
@media (max-width: 520px) {
}
.decision-quick-btn {
flex: 0 0 auto;
width: auto;
min-width: 160px;
scroll-snap-align: start;
}
#relationsResult:empty::before {
content: "Choisis ton signe pour découvrir l'énergie relationnelle du jour.";
}
#biorhythmResult:empty::before {
content: "Entre ta date de naissance pour calculer tes biorythmes.";
}
.astro-v2-btn,
.premium-btn {
padding: 12px 32px;
background: linear-gradient(135deg, #7c3aed, #a855f7);
border: none;
border-radius: 8px;
color: #fff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.astro-v2-btn:hover,
.premium-btn:hover {
box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
}
.premium-btn {
width: 100%;
padding: 14px 24px;
margin-top: 8px;
}
.premium-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
}
@media (max-width: 650px) {
}
@media (max-width: 600px) {
}
@media (max-width: 520px) {
}
@media (max-width: 540px) {
}
@media (max-width: 480px) {
}
/* =========================================================
ASTRO V2 — HOROSCOPE ONLY (patch 1)
Scoped uniquement à l’onglet Horoscope
========================================================= */
@media (max-width: 768px) {
}
/* =========================================================
DREAM ANALYSIS
========================================================= */
/* =========================================================
MINI BUTTONS / UTILS
========================================================= */
.mini-btn {
padding: 6px 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: inherit;
cursor: pointer;
}
.mini-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
/* =========================================================
ANIMATIONS
========================================================= */
#progressText {
margin-top: 8px;
font-size: 0.85rem;
color: #e6d282;
text-align: center;
}
#progressText.waiting-ia {
animation: pulseText 1.2s ease-in-out infinite;
}
@keyframes pulseText {
0% { opacity: 0.4; }
50% { opacity: 1; }
100% { opacity: 0.4; }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes numeroTabFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes soulFlame {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
}
50% {
transform: scale(1.01);
filter: drop-shadow(0 0 28px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 46px rgba(255, 140, 0, 0.85)) brightness(1.25);
}
}
@keyframes authPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(230, 210, 130, 0.4)); }
50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(230, 210, 130, 0.6)); }
}
@keyframes portalFloat {
0%, 100% {
transform: translateY(0) scale(1);
filter: drop-shadow(0 0 30px rgba(230, 210, 130, 0.5));
}
50% {
transform: translateY(-10px) scale(1.02);
filter: drop-shadow(0 0 50px rgba(230, 210, 130, 0.7));
}
}
@keyframes particleRise {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}
@keyframes iconPulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
@keyframes ringRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes runesRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes circlePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
@keyframes planchetteGlowPulse {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.18); }
}
@keyframes waveExpand {
0% { transform: translate(-50%,-50%) scale(1); opacity: 0.65; }
100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
}
@keyframes voiceFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Nouveaux keyframes spectraux */
@keyframes coldMist {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(5%, 3%) scale(1.07); opacity: 0.7; }
}
@keyframes mistDrift1 {
0% { transform: rotate(0deg) translateX(10px) scale(1); }
50% { transform: rotate(180deg) translateX(-10px) scale(1.06); }
100% { transform: rotate(360deg) translateX(10px) scale(1); }
}
@keyframes mistDrift2 {
0% { transform: rotate(0deg) translateX(-8px) scale(1.02); }
50% { transform: rotate(-180deg) translateX(8px) scale(0.96); }
100% { transform: rotate(-360deg) translateX(-8px) scale(1.02); }
}
@keyframes veinPulse {
0%, 100% { opacity: 0; transform: rotate(40deg) translateX(-50%) scaleY(0); }
20% { opacity: 0.8; }
50% { opacity: 0.4; transform: rotate(40deg) translateX(-50%) scaleY(1); }
80% { opacity: 0.1; }
}
@keyframes wordFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes wordEphemeral {
0% { opacity: 0; transform: translateY(12px) scale(0.88); filter: blur(4px); }
20% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
75% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-8px) scale(0.95); filter: blur(2px); }
}
@keyframes voiceAppear {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes glitchFlash {
0% { opacity: 0; }
10% { opacity: 0.4; background: rgba(140,60,220,0.14); }
25% { opacity: 0; }
40% { opacity: 0.22; background: rgba(212,175,55,0.07); }
100% { opacity: 0; }
}
/* =========================================================
PRINT
========================================================= */
@media print {
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
/* Force aussi display:block sur le print zone et ses ancêtres pour résister
à toute règle parasite. Override explicite plus fort que .no-screen. */
/* Centrage des contenus */
h2,
h3 {
page-break-after: avoid !important;
break-after: avoid !important;
}
.no-print,
button,
.close-premium-btn,
#downloadAstroPdf,
.tabs-nav {
display: none !important;
}
/* Pages */
@page {
margin: 1cm;
size: A4;
}
}
/* =========================================================
TAROT RESULT VIEW
========================================================= */
.result-card.tarot-result-card {
max-width: 820px;
margin: 0 auto 44px;
padding: 10px 18px 24px;
background: transparent;
border: none;
box-shadow: none;
}
#tarotResultStatus {
display: none;
}
#tarotResultCardZone {
display: flex;
justify-content: center;
margin: 0 auto 22px;
}
/* Patch de lisibilité pour l'interprétation Tarot */
/* Force la couleur des titres générés par l'IA dans ce bloc */
/* =========================================================
TAROT THEME PILLS — OVERRIDE FINAL
========================================================= */
#tarotThemePills.tarot-theme-pills {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 10px !important;
margin-top: 12px !important;
margin-bottom: 16px !important;
}
#dailyThemeBlock .theme-select-hidden,
#dailyThemeBlock select.theme-select-hidden,
#themeSelect.theme-select-hidden {
position: absolute !important;
left: -99999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
#themeDescription.tarot-theme-description {
text-align: left !important;
max-width: 100% !important;
margin-top: 10px !important;
color: var(--text-muted-2) !important;
font-size: 0.8rem !important;
line-height: 1.45 !important;
}
@media (max-width: 768px) {
#tarotThemePills.tarot-theme-pills {
gap: 8px !important;
}
}
@media (max-width: 767px) {
}
@media (max-width: 767px) {
#readingResultView.view.active {
margin-top: -50px;
}
#readingResultView .result-card.tarot-result-card {
padding-top: 0 !important;
}
}
/* Tablette + desktop : titre toujours visible sous la barre fixe */
@media (min-width: 768px) {
}
/* Grand écran > 1024px : .app n'a que 24px de padding, on compense */
@media (min-width: 1025px) {
}
/* =========================================================
TAROT 5 CARTES — ACCUEIL
Patch minimal scoped majors uniquement
Objectif :
- plus de respiration sous le sous-titre
- plus d’air entre le titre du bloc et le champ
- recoller les surfaces à la vraie référence 1 carte / menus
========================================================= */
/* =========================================================
TAROT 1 CARTE — BOUTON LANCER LE TIRAGE
Même famille que le bouton portail, version compacte
========================================================= */
@media (max-width: 768px) {
}
/* =========================================================
TAROT RESULT — BOUTON RETOUR LOCAL
========================================================= */
@media (max-width: 768px) {
}
#readingActions .btn-secondary,
#readingActions .btn-primary,
#readingActions .tarot-back-btn {
min-width: 170px;
justify-content: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 0.84rem !important;
font-weight: 500 !important;
line-height: 1 !important;
}
#readingActions .btn-secondary,
#readingActions .tarot-back-btn {
padding: 10px 18px !important;
font-size: 0.84rem !important;
font-weight: 500 !important;
line-height: 1 !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* =========================================================
TAROT RESULT VIEW — THREE CARD SPECIFIC
Scoped au tirage 3 cartes
========================================================= */
@media (max-width: 640px) {
.threecard-actions-row {
flex-wrap: wrap;
}
}
.reading-actions .btn-secondary:hover,
.reading-actions .btn-secondary:focus-visible,
.reading-actions .tarot-back-btn:hover,
.reading-actions .tarot-back-btn:focus-visible {
color: var(--gold-main) !important;
border-color: var(--gold-main) !important;
outline: none !important;
}
/* Nettoyage du conteneur pour bien aligner les boutons */
/* On harmonise les deux boutons qui ont maintenant la classe .tarot-btn-fix */
/* Petit effet au survol pour les deux */
/* =========================================================
TAROT — RÉSULTAT FINAL 5 CARTES (MAJORS)
Version compacte, sans scroll desktop
========================================================= */
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
}
@media (max-width: 640px) {
}
/* =========================================================
TAROT — RÉSULTAT FINAL 7 CARTES (FULL)
Version compacte, alignée sur le 5 cartes
========================================================= */
/* 7 cartes — remonter légèrement le bloc interprétation */
@media (max-width: 1200px) {
}
@media (max-width: 980px) {
}
@media (max-width: 640px) {
}
/* =========================================================
TAROT — supprime le voile tactile mobile sur les cartes
========================================================= */
.card,
.card img {
-webkit-tap-highlight-color: transparent !important;
tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
outline: none !important;
}
.card:focus,
.card:active,
.card img:focus,
.card img:active {
outline: none !important;
}
.card img {
display: block;
}
/* =========================================================
DESKTOP — TAROT 1 CARTE : pills pleine largeur
========================================================= */
@media (min-width: 1025px) {
}
/* =========================================================
ASTRO V2 — TITRES OR (Horoscope + Relations)
========================================================= */
#astroV2HoroscopeView .astro-v2-gold-title,
#astroV2RelationsView .astro-v2-gold-title,
#astroV2BiorhythmView .astro-v2-gold-title,
#astroV2ProfileView .astro-v2-gold-title,
#numerologyCyclesView .astro-v2-gold-title,
#numerologyAffinitiesView .astro-v2-gold-title {
color: var(--gold-main) !important;
}
/* =========================================================
ASTRO V2 — RELATIONS ONLY
Scoped uniquement à l’onglet Relations
========================================================= */
/* signes relations : plus de violet + hover plus lisible */
/* interprétation relations = shell tarot 1 carte */
@media (max-width: 768px) {
}
/* =========================================================
ASTRO V2 — RELATIONS ONLY
bloc nettoyé et unifié
========================================================= */
/* titre or */
/* onglets today / compat */
/* pills solo / en couple */
/* vue aujourd’hui : mêmes signes qu’horoscope */
/* vue compatibilité : deux grilles 3x4 plus compactes */
/* boîtes d’interprétation séparées */
/* tablette */
@media (max-width: 900px) {
}
/* très petit mobile */
@media (max-width: 640px) {
}
/* =========================================================
RELATIONS COMPAT HEADER — fix mobile (signe coupé + label décentré)
========================================================= */
@media (max-width: 480px) {
}
/* =========================================================
RELATIONS TODAY — alignement forcé sur Horoscope
À placer TOUT EN BAS du CSS
========================================================= */
/* =========================================================
RELATIONS COMPAT — léger agrandissement des cases signes
========================================================= */
/* tablette */
@media (max-width: 900px) {
}
/* =========================================================
ASTRO V2 — BIORYTHMES ONLY (patch 1)
Scoped uniquement au module Biorythmes
========================================================= */
/* =========================================================
ASTRO V2 — BIORYTHMES ONLY (tablet header image)
========================================================= */
@media (max-width: 640px) {
/* vidéo astro hero gérée par le grid wrapper */
}
/* =========================================================
ASTRO V2 — BIORYTHMES ONLY (tablet vertical lift)
vrai correctif : on compense le padding-top global
========================================================= */
@media (max-width: 768px) {
body:has(#astroV2BiorhythmView.view.active) .app {
padding-top: calc(18px + env(safe-area-inset-top)) !important;
}
}
/* =========================================================
ASTRO V2 — PROFIL ASTRO ONLY
tabs hautes sans violet
========================================================= */
/* =========================================================
ASTRO V2 — PROFIL ASTRO ONLY
grille des signes sans violet
========================================================= */
/* =========================================================
ASTRO V2 — PROFIL ASTRO ONLY
mini-cartes alignées sur le thème "reading" du tarot 1 carte
========================================================= */
/* ===== PREMIUM PROFILE REFONTE ===== */
/* Bouton Générer profil — style Lancer le tirage */
/* Actions bas du formulaire création */
/* Header premium : pills + bouton + */
/* Vue résultat plein écran */
/* Titres de sections */
/* Masque les titres h3 à l'écran dans les chapitres accordéons (le bouton fait déjà office de titre) */
#astroV2ProfileView .astro-profile-full-content .reading-chapter-body .astro-section-title {
display: none;
}
/* Signature / synthèse */
/* Section Vos Grands Traits */
/* Section Histoire */
@media (max-width: 768px) {
}
/* Barre d'actions en bas */
/* Zone impression */
@media print {
/* Cacher l'écran, montrer le print */
/* Réduire le padding global du print zone pour remonter le contenu */
/* Pages : padding réduit, pas de surplus en haut */
/* Page 1 : break après pour que page 2 commence proprement */
/* Page 2 : break après pour que page 3 commence proprement */
/* Réduire la taille du chart natal pour que la signature tienne page 1 */
/* Centrage */
/* Signature : alignée à gauche, compacte en print */
/* Page 2 – Vos Grands Traits : empêcher les coupures au milieu d'une carte */
/* Grille 2 colonnes adaptée au print */
/* Page 3 : le contenu s'affiche normalement, le fond est assuré par html/body */
/* Fond uniforme sur l'espace vide en bas de la dernière page */
html, body {
background: #1a1a1a !important;
}
}
/* Centrer le chart natal */
@media (max-width: 768px) {
}
/* Centrage vertical désactivé — header fixe en haut */
@media (min-width: 769px) {
}
/* ============================================================
ORACLE DE LA FLAMME — CSS UNIQUE
============================================================ */
/* Fond noir pendant le chargement vidéo — tous écrans */
body:has(#vibrationMediumView.active) {
background: #000 !important;
overflow: hidden;
}
/* Supprimer le padding-top réservé à la navbar — la vidéo est plein écran */
body:has(#vibrationMediumView.active) .app {
padding-top: calc(12px + env(safe-area-inset-top)) !important;
}
/* Oracle de la flamme — espace sous la top-bar sur mobile */
@media (max-width: 768px) {
body:has(#vibrationMediumView.active) .app {
padding-top: calc(46px + env(safe-area-inset-top)) !important;
}
}
/* Rêves & Symboles — espace sous la top-bar */
@media (max-width: 768px) {
body:has(#vibrationRevesView.active) .app {
padding-top: calc(46px + env(safe-area-inset-top)) !important;
}
}
/* Sceau d'intention — espace sous la top-bar */
@media (max-width: 768px) {
body:has(#intuitionLabView.active) .app {
padding-top: calc(46px + env(safe-area-inset-top)) !important;
}
}
/* Tarot (tous modules) — espace sous la top-bar (compteur arcanes) */
@media (max-width: 768px) {
body:has(#readingView.active) .app {
padding-top: calc(58px + env(safe-area-inset-top)) !important;
}
}
/* Numérologie (toutes catégories) — espace sous la top-bar */
@media (max-width: 768px) {
body:has(#numerologyProfileView.active) .app,
body:has(#numerologyCyclesView.active) .app,
body:has(#numerologyAffinitiesView.active) .app,
body:has(#numerologyNamesView.active) .app {
padding-top: calc(46px + env(safe-area-inset-top)) !important;
}
}
/* Astrologie (toutes catégories sauf profil) — espace sous la top-bar */
@media (max-width: 768px) {
body:has(#astroV2HoroscopeView.active) .app,
body:has(#astroV2RelationsView.active) .app,
body:has(#astroV2BiorhythmView.active) .app,
body:has(#astroV2BiorhythmView.view.active) .app,
body:has(#astroV2ProfileView.active) .app {
padding-top: calc(46px + env(safe-area-inset-top)) !important;
}
}
/* Vidéos fond Oracle — superposées, crossfade via opacity */
/* display géré en JS pour éviter le bouton play natif Android */
/* Cacher le cadre et tout son contenu — tous écrans */
/* Réponse écrite — fixée en bas, mobile first */
/* Desktop — plus grand */
@media (min-width: 769px) {
}
/* OUI / NON uniquement : label plus grand */
@media (min-width: 769px) {
}
/* Vue principale */
#vibrationMediumView .astro-wrapper.vib-flame-page {
position: relative;
z-index: 2;
max-width: 620px;
margin: 0 auto;
padding: 0 4px 28px;
}
/* En-tête */
@keyframes flame-flicker {
0% { transform: scale(1) rotate(-1deg); opacity: 0.88; }
50% { transform: scale(1.06) rotate(1deg); opacity: 1; }
100% { transform: scale(0.97) rotate(-0.5deg); opacity: 0.92; }
}
/* Panneau question */
/* Règle insérée par le JS */
/* Masquage pendant la réponse */
/* Question visible en lecture seule pendant la réponse */
/* Panneau oracle */
/* Zone réponse */
/* Glow révélation — filter:drop-shadow (pas de conflit avec text-shadow statiques) */
@keyframes glow-yes {
0% { filter: brightness(0.1); transform: scale(0.93); }
45% { filter: brightness(1.6) drop-shadow(0 0 32px rgba(34, 197, 94, 1.0)) drop-shadow(0 0 60px rgba(34, 197, 94, 0.50)); transform: scale(1.06); }
100% { filter: brightness(1) drop-shadow(0 0 18px rgba(34, 197, 94, 0.55)) drop-shadow(0 0 36px rgba(34, 197, 94, 0.25)); transform: scale(1); }
}
@keyframes glow-no {
0% { filter: brightness(0.1); transform: scale(0.93); }
45% { filter: brightness(1.6) drop-shadow(0 0 32px rgba(239, 68, 68, 1.0)) drop-shadow(0 0 60px rgba(239, 68, 68, 0.50)); transform: scale(1.06); }
100% { filter: brightness(1) drop-shadow(0 0 18px rgba(239, 68, 68, 0.55)) drop-shadow(0 0 36px rgba(239, 68, 68, 0.25)); transform: scale(1); }
}
@keyframes glow-refuse {
0% { filter: brightness(0.1); transform: scale(0.93); }
45% { filter: brightness(1.5) drop-shadow(0 0 28px rgba(200, 210, 230, 0.90)) drop-shadow(0 0 55px rgba(200, 210, 230, 0.45)); transform: scale(1.04); }
100% { filter: brightness(1) drop-shadow(0 0 16px rgba(148, 163, 184, 0.50)) drop-shadow(0 0 30px rgba(148, 163, 184, 0.22)); transform: scale(1); }
}
/* Responsive mobile — strict nécessaire */
@media (max-width: 768px) {
#vibrationMediumView .astro-wrapper.vib-flame-page {
max-width: 100%;
padding: 0 8px 0;
margin-top: 0;
}
/* Emoji réduit, sans marge */
/* Titre compact */
/* Sous-titre compact (visible mobile pour expliquer le binaire) */
/* Panneau question serré */
/* Règles masquées */
/* Bouton */
/* Status */
/* Question affichée pendant la consultation */
/* Verdict (OUI / NON / NE SE PRONONCE PAS) */
/* Réponse écrite */
}
/* Tablette — Oracle de la Flamme */
@media (min-width: 769px) and (max-width: 1024px) {
}
/* =========================================================
VIBRATION — RÊVES & SYMBOLES
Refonte visuelle ciblée
========================================================= */
@media (max-width: 768px) {
}
/* ── Vision onirique ──────────────────────────────────────────── */
/* Modal réminiscence onirique */
@keyframes dream-emerge {
from { opacity: 0; filter: blur(18px); transform: scale(0.97); }
to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@media (max-width: 480px) {
}
@media (max-width: 480px) {
.home-card {
padding: 7px 7px 4px !important;
}
.home-card .home-title,
.home-card .home-desc,
.root-card-title {
margin-top: 4px !important;
margin-bottom: 0 !important;
min-height: 1.65em !important;
line-height: 1.05 !important;
max-width: 95% !important;
}
}
/* =========================================================
MENUS PRINCIPAUX MOBILE/TABLETTE — sécurisation layout
Passe de Flex à Grid pour une tenue plus robuste
========================================================= */
.view .home-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: center;
}
.home-card {
width: 100%;
max-width: none;
min-width: 0;
}
@media (max-width: 768px) {
.home-card {
flex: unset;
padding: 10px;
}
}
@media (max-width: 480px) {
.view .home-grid {
gap: 12px;
margin-top: 16px;
margin-bottom: 24px;
}
.home-card {
flex: unset;
padding: 8px;
}
/* Numero menu: align margins with other menu views to avoid vertical shift */
#numeroView .home-grid {
margin-top: 16px !important;
margin-bottom: 24px !important;
}
}
/* =========================================================
MOBILE — TAROT 1 CARTE (tirage du jour)
Patch ciblé mobile uniquement (≤640px, exclut les tablettes)
========================================================= */
@media (max-width: 640px) {
/* 1) Écran d'entrée : on supprime le hero visuel */
/* 2) On remonte tout le bloc d'entrée */
/* 3) Titre + sous-titre plus compacts */
/* 4) Bloc thème plus compact */
/* 5) Bouton lancer plus proche du bloc */
/* 6) Une fois tiré : moins d’air avant la carte */
/* 7) Résultat : carte et titre plus compacts */
#readingResultView .result-card.tarot-result-card {
max-width: 100% !important;
margin: 0 auto 24px !important;
padding: 0 10px 18px !important;
}
/* 8) Bloc interprétation plus compact et plus lisible */
/* 9) Boutons de fin en colonne sur mobile */
#readingActions .btn-secondary,
#readingActions .btn-primary,
#readingActions .tarot-back-btn {
width: 100% !important;
min-width: 0 !important;
padding: 12px 14px !important;
font-size: 0.95rem !important;
}
}
/* =========================================================
TABLETTE — TAROT 1 CARTE : layout compact (même que mobile)
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
#readingResultView .result-card.tarot-result-card {
max-width: 100% !important;
margin: 0 auto 24px !important;
padding: 0 10px 18px !important;
}
}
/* =========================================================
MOBILE — TAROT 1 CARTE : pills + carte interprétation
À coller TOUT EN BAS du CSS
========================================================= */
@media (max-width: 767px) {
/* -----------------------------------------------------
1) Pills thème : grille mobile daily en 2 x 3
----------------------------------------------------- */
/* -----------------------------------------------------
2) Carte résultat/interprétation plus petite
----------------------------------------------------- */
/* -----------------------------------------------------
3) Un peu moins d’air entre carte et texte
----------------------------------------------------- */
}
/* =========================================================
MOBILE — TAROT 1 CARTE : affinage final résultat
========================================================= */
@media (max-width: 767px) {
#tarotResultCardZone {
margin: 0 auto 10px !important;
}
}
@media (max-width: 767px) {
}
/* =========================================================
MOBILE TÉLÉPHONE — TAROT 1 CARTE : lecture segmentée
========================================================= */
@media (max-width: 640px) {
/* Hero visuel daily : remplacé par la vidéo — img masquée */
/* readingHeroImg géré par JS — ne pas forcer display:none */
/* Vidéo hero 1 carte sur mobile */
.daily-mobile-reading {
display: flex;
flex-direction: column;
gap: 12px;
}
.daily-mobile-summary {
font-size: 0.95rem;
line-height: 1.55;
}
.daily-mobile-summary p {
margin: 0 0 12px;
}
}
/* =========================================================
MOBILE — TAROT 3 CARTES (DÉCISION)
========================================================= */
@media (max-width: 640px) {
/* 1) Hero img masquée (remplacée par la vidéo) */
/* readingHeroImg géré par JS */
/* Vidéo hero 3 cartes sur mobile */
/* 2) Masquer le titre interne du bloc décision (redondant avec le header) */
/* 3) Limiter à 4 paires rapides sur mobile */
/* 4 boutons → 3 : masquer TTS sur mobile (rarement utilisé) */
/* double-ID pour battre la spécificité de #readingActions .btn-secondary */
/* Résumé + Détail côte à côte sur mobile
#readingActions est dans #readingResultView (pas #readingView)
Annule le width:100% imposé par le bloc "1 carte" */
#readingActions .threecard-actions-row-main .btn-primary,
#readingActions .threecard-actions-row-main .btn-secondary {
width: auto !important;
min-width: 0 !important;
flex: 1 1 0 !important;
white-space: nowrap;
}
/* Champs décision côte à côte (annule le 640px qui empile) */
/* Masquer le compteur de caractères (libère de la place) */
/* 4) Grille 3 cartes résultat : conserver 3 colonnes, taille réduite */
}
/* =========================================================
MOBILE — TAROT 5 CARTES (MAJORS)
========================================================= */
@media (max-width: 640px) {
/* 1) Hero img masquée (remplacée par la vidéo) */
/* readingHeroImg géré par JS */
/* Vidéo hero 5 cartes sur mobile */
/* 2) Titre + sous-titre compacts */
/* 3) Question block compact */
/* 4) Bouton lancer compact */
/* 5) Résultat 5 cartes : 3+2 wrap centré */
/* 6) Masquer "Lire l'interprétation" sur mobile */
/* 7) Résumé + Détail côte à côte (comme 3 cartes) */
}
/* =========================================================
READING — CHAPITRES ACCORDÉONS (tirage 7 cartes)
Même pattern que reading-accordion :
Desktop : bouton masqué, contenu toujours visible
Mobile : pill dorée dépliante par chapitre
========================================================= */
/* Desktop/tablette : bouton masqué, corps toujours visible */
@media (min-width: 768px) {
}
/* Desktop : accordéon actif pour Rêves & Symboles — palette onirique */
@media (min-width: 768px) {
#vibrationRevesView .reading-chapter-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
cursor: pointer;
padding: 0.65rem 1.2rem;
border-radius: 2rem;
background: rgba(140, 165, 220, 0.07);
border: 1px solid rgba(140, 165, 220, 0.22);
color: rgba(185, 210, 245, 0.72);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.1em;
width: 100%;
transition: background 0.2s, color 0.2s;
user-select: none;
font-family: inherit;
margin-bottom: 2px;
}
#vibrationRevesView .reading-chapter-btn[aria-expanded="true"] {
background: rgba(140, 165, 220, 0.13);
color: rgba(210, 228, 255, 0.92);
}
#vibrationRevesView .reading-chapter-arrow {
font-size: 0.68rem;
opacity: 0.65;
flex-shrink: 0;
transition: transform 0.2s;
}
#vibrationRevesView .reading-chapter-btn[aria-expanded="true"] .reading-chapter-arrow {
transform: rotate(180deg);
}
#vibrationRevesView .reading-chapter-body {
display: none;
padding: 4px 4px 8px;
}
#vibrationRevesView .reading-chapter-body.reading-chapter-open {
display: block;
animation: accordionFadeIn 0.35s ease;
}
}
/* Supprimer le min-height dans les chapitres accordéon rêves — évite les espaces vides */
#vibrationRevesView .reading-chapter-body .vib-dream-card {
min-height: 0;
}
/* Desktop : accordéon actif pour le profil astro complet uniquement */
@media (min-width: 768px) {
#astroV2ProfileView .reading-chapter-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
cursor: pointer;
padding: 0.8rem 1.5rem;
border-radius: 2rem;
background: rgba(255, 215, 100, 0.10);
border: 1px solid rgba(255, 215, 100, 0.28);
color: #f0d48a;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.04em;
width: 100%;
transition: background 0.2s, color 0.2s;
user-select: none;
font-family: inherit;
}
#astroV2ProfileView .reading-chapter-btn[aria-expanded="true"] {
background: rgba(255, 215, 100, 0.18);
color: #ffe08a;
}
#astroV2ProfileView .reading-chapter-arrow {
font-size: 0.7rem;
opacity: 0.8;
flex-shrink: 0;
transition: transform 0.2s;
}
#astroV2ProfileView .reading-chapter-btn[aria-expanded="true"] .reading-chapter-arrow {
transform: rotate(180deg);
}
#astroV2ProfileView .reading-chapter-body {
display: none;
padding: 8px 4px 12px;
}
#astroV2ProfileView .reading-chapter-body.reading-chapter-open {
display: block;
animation: accordionFadeIn 0.35s ease;
}
}
/* Fix overflow mobile — vibration reves + reading-chapter (DIVINIA 2026-04-17) */
@media (max-width: 767px) {
#vibrationRevesView .vib-dream-vision-btn .arcane-badge-inline {
display: inline-block;
margin-top: 2px;
}
}
/* Mobile : accordéon par chapitre */
@media (max-width: 767px) {
#numerologyProfileView .reading-chapter-body {
padding-top: 14px;
}
}
/* =========================================================
MOBILE — SPREAD-7 : cartes face cachée compactes
========================================================= */
@media (max-width: 640px) {
}
/* =========================================================
MOBILE — TAROT 7 CARTES (tirage complet)
========================================================= */
@media (max-width: 640px) {
/* 1) Hero img masquée (remplacée par la vidéo) */
/* readingHeroImg géré par JS */
/* Vidéo hero 7 cartes sur mobile */
/* 2) Titre + sous-titre compacts */
/* 3) Cartes : 4 par ligne (2 rangées : 4+3, centrées) */
/* 4) Masquer "Lire l'interprétation" sur mobile */
/* 5) Résumé + Détail côte à côte */
}
@media (max-width: 768px) {
.home-card {
-webkit-tap-highlight-color: transparent !important;
tap-highlight-color: transparent !important;
}
}
/* =========================================================
PATCH GLOBAL MOBILE — supprime le voile tactile / sélection
========================================================= */
@media (max-width: 768px) {
a,
button,
[role="button"],
.btn-primary,
.btn-secondary,
.home-card,
.tarot-theme-pill,
.card,
.card img,
.reading-accordion-btn,
select,
textarea,
input,
label {
-webkit-tap-highlight-color: transparent !important;
tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
outline: none !important;
}
a:focus,
button:focus,
[role="button"]:focus,
.btn-primary:focus,
.btn-secondary:focus,
.home-card:focus,
.tarot-theme-pill:focus,
.card:focus,
.card img:focus,
.reading-accordion-btn:focus,
select:focus,
textarea:focus,
input:focus,
label:focus,
a:active,
button:active,
[role="button"]:active,
.btn-primary:active,
.btn-secondary:active,
.home-card:active,
.tarot-theme-pill:active,
.card:active,
.card img:active,
.reading-accordion-btn:active {
outline: none !important;
-webkit-tap-highlight-color: transparent !important;
}
.home-card img,
.card img,
.tarot-theme-pill,
.btn-primary,
.btn-secondary,
.reading-accordion-btn {
-webkit-user-drag: none !important;
user-select: none !important;
}
}
/* =========================================================
HOROSCOPE DU JOUR — MOBILE FIX PROPRE
========================================================= */
@media (max-width: 640px) {
/* vidéo astro hero gérée par le grid wrapper */
}
/* =========================================================
RELATIONS ASTRO — MOBILE TÉLÉPHONE UNIQUEMENT
entête 120px + boutons signes plus petits + centrage horizontal
========================================================= */
@media (max-width: 640px) {
/* vidéo astro hero gérée par le grid wrapper */
/* -------------------------
RELATIONS TODAY
------------------------- */
/* -------------------------
RELATIONS COMPAT
------------------------- */
}
@media (max-width: 640px) {
}
@media (max-width: 640px) {
}
@media (max-width: 640px) {
}
@media (max-width: 640px) {
/* vidéo astro hero gérée par le grid wrapper */
}
@media (max-width: 640px) {
}
@media (max-width: 640px) {
}
@media (max-width: 640px) {
}
@media (max-width: 640px) {
}
/* =========================================================
MOBILE ≤640px — ENTÊTE 120px : NUMÉROLOGIE (4 modules) + SYMBOLES
========================================================= */
@media (max-width: 640px) {
/* — NUMÉROLOGIE — */
#numerologyProfileView .astro-wrapper > img,
#numerologyProfileView .astro-wrapper > video,
#numerologyProfileView #numProfileFormState > img,
#numerologyProfileView #numProfileFormState > video {
max-height: 120px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto 10px !important;
}
#numerologyCyclesView .astro-wrapper > img,
#numerologyCyclesView .astro-wrapper > video {
max-height: 120px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto 10px !important;
}
#numerologyAffinitiesView .astro-wrapper > img,
#numerologyAffinitiesView .astro-wrapper > video {
max-height: 120px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto 10px !important;
}
/* — LABO SCEAU D'INTENTION — */
#intuitionLabView .sigil-hero-img {
max-height: 120px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto 10px !important;
}
/* Wrapper compact pour la numérologie */
#numerologyCyclesView .astro-wrapper,
#numerologyAffinitiesView .astro-wrapper {
transform: translateY(-5px) !important;
}
#numerologyCyclesView .astro-title,
#numerologyCyclesView .astro-subtitle,
#numerologyAffinitiesView .astro-title,
#numerologyAffinitiesView .astro-subtitle,
#numerologyNamesView h2,
#numerologyNamesView p {
margin-top: 0 !important;
}
/* — SYMBOLES — */
/* Rêves & Symboles */
#vibrationRevesView .astro-wrapper {
transform: translateY(-5px) !important;
}
#vibrationRevesView .astro-title,
#vibrationRevesView .astro-subtitle {
margin-top: 0 !important;
}
}
/* =========================================================
DESKTOP (>1024px) — ajustements entêtes spécifiques
========================================================= */
@media (min-width: 1025px) {
/* Profil astro — remonter fort */
body:has(#astroV2ProfileView.active) .app {
padding-top: 0px !important;
}
body:has(#astroV2ProfileView.active) .brand {
display: none !important;
}
/* Sceau d'intention — baisser légèrement + agrandir image */
body:has(#intuitionLabView.active) .app {
padding-top: 72px !important;
}
#intuitionLabView .sigil-hero-img {
width: 230px !important;
max-width: 230px !important;
max-height: none !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto 16px !important;
}
#intuitionLabView .sigil-title {
font-size: 1.8rem !important;
}
}
/* =========================================================
TAROT / ASTRO / NUMÉROLOGIE non-mobile (≥769px) — entête uniforme
Override du padding-top: 104px global sur tablette/desktop
========================================================= */
@media (min-width: 769px) {
body:has(#astroV2ProfileView.active) .app,
body:has(#astroV2HoroscopeView.active) .app,
body:has(#astroV2RelationsView.active) .app,
body:has(#astroV2BiorhythmView.active) .app,
body:has(#numerologyProfileView.active) .app,
body:has(#numerologyCyclesView.active) .app,
body:has(#numerologyAffinitiesView.active) .app,
body:has(#numerologyNamesView.active) .app,
body:has(#intuitionLabView.active) .app,
body:has(#vibrationRevesView.active) .app,
body:has(#readingView.active) .app {
padding: 40px 24px 24px !important;
}
#astroV2ProfileView .astro-wrapper,
#astroV2HoroscopeView .astro-wrapper,
#astroV2RelationsView .astro-wrapper,
#astroV2BiorhythmView .astro-wrapper,
#numerologyProfileView .astro-wrapper,
#numerologyCyclesView .astro-wrapper,
#numerologyAffinitiesView .astro-wrapper {
margin-top: 0 !important;
}
}
/* =========================================================
ASTRO V2 TITLES — MOBILE (<=640px) : tient sur 1 ligne
========================================================= */
@media (max-width: 640px) {
}
/* =========================================================
TAROT HERO WRAP — MOBILE (<=640px)
1 carte / majeurs / complet : 150px ; 3 cartes : 140px
========================================================= */
@media (max-width: 640px) {
}
/* =========================================================
NUMEROLOGIE TITLES — MOBILE (<=640px) : tient sur 1 ligne
========================================================= */
@media (max-width: 640px) {
#numerologyProfileView .astro-title,
#numerologyCyclesView .astro-title,
#numerologyAffinitiesView .astro-title,
#numerologyNamesView .astro-title {
font-size: 1.15rem !important;
}
}
/* =========================================================
NUMEROLOGIE HERO WRAPS — MOBILE (<=640px) : max-width 150px
(profil, cycles, affinités, noms)
========================================================= */
@media (max-width: 640px) {
#numerologyProfileView #numProfileHeroImgWrap,
#numerologyCyclesView #numCyclesHeroImgWrap,
#numerologyAffinitiesView #numAffinitiesHeroImgWrap,
#numerologyNamesView #numNamesHeroImgWrap {
max-width: 150px !important;
}
}
/* =========================================================
ASTRO V2 HERO IMGS — MOBILE (<=640px)
horoscope + biorythmes : 160px ; relations + profil : 140px
========================================================= */
@media (max-width: 640px) {
}
/* =========================================================
TABLETTE (641px–1024px) — entête astro & numérologie : tailles fixes
Placé après les blocs mobile pour gagner la cascade
========================================================= */
@media (min-width: 641px) and (max-width: 1024px) {
#astroV2HoroscopeView img.astro-v2-hero-img,
#astroV2RelationsView img.astro-v2-hero-img,
#astroV2BiorhythmView img.astro-v2-hero-img,
#astroV2ProfileView img.astro-v2-hero-img,
#numerologyProfileView .astro-wrapper > img,
#numerologyCyclesView .astro-wrapper > img,
#numerologyAffinitiesView .astro-wrapper > img,
#numerologyNamesView > img,
#intuitionLabView .sigil-hero-img {
width: 230px !important;
max-width: 230px !important;
max-height: none !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto 16px !important;
}
#astroV2HoroscopeView .astro-title,
#astroV2RelationsView .astro-title,
#astroV2BiorhythmView .astro-title,
#astroV2ProfileView .astro-title,
#numerologyProfileView .astro-title,
#numerologyCyclesView .astro-title,
#numerologyAffinitiesView .astro-title,
#numerologyNamesView .astro-title,
#intuitionLabView .sigil-title {
font-size: 1.4rem !important;
}
#astroV2HoroscopeView .astro-subtitle,
#astroV2RelationsView .astro-subtitle,
#astroV2BiorhythmView .astro-subtitle,
#astroV2ProfileView .astro-subtitle,
#numerologyProfileView .astro-subtitle,
#numerologyCyclesView .astro-subtitle,
#numerologyAffinitiesView .astro-subtitle,
#numerologyNamesView .astro-subtitle,
#intuitionLabView .sigil-subtitle {
font-size: 0.9rem !important;
}
}
/* ===== BOUTIQUE DES ARCANES ===== */
@keyframes shopStarPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.8)} }
@media (max-width: 860px) { }
@keyframes shopGemFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@media (max-width: 768px) { }
@keyframes shopModalIn { from{transform:scale(.88);opacity:0} to{transform:scale(1);opacity:1} }
@media (max-width: 860px) {
}
@media (min-width: 861px) and (max-width: 1400px) {
}
@media (min-width: 600px) and (max-width: 860px) {
}
/* --- Shop tabs --- */
/* --- Pack cards --- */
/* Rewarded ad banner (pub video opt-in) */
@media (max-width: 700px) {
}
@media (max-width: 860px) {
/* Ad card adapté à la cellule grille étroite (2x2 mobile/tablette) */
}
/* ===== FIN BOUTIQUE ===== */
/* Auth CGU checkbox */
/* =====================================================================
🜂 LIENS D'ÂME — Module numérologique karmique
Palette alignée sur le reste du site : doré + bleu nuit
===================================================================== */
/* Variables locales — réutilisent --gold-main / --gold-soft globaux */
/* ---------- Form view — teaser ---------- */
/* ---------- Form view — duo grid ---------- */
/* Form — bouton (s'aligne sur .btn-primary doré) */
/* ---------- Result view — wrapper ---------- */
/* ---------- Theater (computing) ---------- */
@keyframes karmaRingPulse {
0%, 100% { transform: scale(1); opacity: 0.45; }
50% { transform: scale(1.06); opacity: 0.7; }
}
@keyframes karmaGlyphFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* ---------- Hero (verdict + union orb + phase) ---------- */
@keyframes karmaUnionPulse {
0% { transform: scale(0.95); opacity: 0.6; }
100% { transform: scale(1.5); opacity: 0; }
}
/* Container générique pour les chapitres en prose (Pacte, Phase) */
/* ---------- Empreintes — duo de cartes profil ---------- */
/* Tags */
/* ---------- Chapitres — titre commun ---------- */
/* ---------- Le Miroir — duo ---------- */
/* ---------- Le Pacte ---------- */
/* Phase texte dans la box prose */
/* ---------- Dettes / Empreintes ---------- */
/* ---------- Accordéons aussi sur DESKTOP pour le résultat karma ---------- */
/* La règle globale ouvre tout sur ≥768px. On override pour Lien d'âmes */
/* afin d'éviter le pavé géant : chapitres pliés par défaut. */
@media (min-width: 768px) {
#karmaResultView .reading-chapter-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
cursor: pointer;
padding: 0.7rem 1.3rem;
border-radius: 999px;
background: rgba(230, 210, 130, 0.08);
border: 1px solid rgba(230, 210, 130, 0.22);
color: var(--karma-gold-soft);
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.05em;
width: 100%;
transition: background 0.2s, color 0.2s, border-color 0.2s;
user-select: none;
font-family: inherit;
margin: 6px 0 4px;
}
#karmaResultView .reading-chapter-btn:hover {
background: rgba(230, 210, 130, 0.13);
border-color: rgba(230, 210, 130, 0.4);
color: var(--karma-gold);
}
#karmaResultView .reading-chapter-btn[aria-expanded="true"] {
background: rgba(230, 210, 130, 0.16);
color: var(--karma-gold);
border-color: rgba(230, 210, 130, 0.45);
}
#karmaResultView .reading-chapter-body {
display: none;
padding: 10px 6px 6px;
}
#karmaResultView .reading-chapter-body.reading-chapter-open {
display: block;
animation: accordionFadeIn 0.35s ease;
}
}
/* ---------- Phase texte ---------- */
/* ---------- Conseils ---------- */
/* ---------- Footer ---------- */
/* ---------- Liste lectures sauvegardées (form view) ---------- */
/* Strip horizontal — hauteur constante, scroll latéral si trop de cartes */
/* ---------- Impression / PDF ---------- */
@media print {
/* Cache tout sauf le résultat karma — scopé à .printing-karma (ajouté par
numerology-karma.js avant window.print(), retiré après afterprint).
Sans ce scope, la règle s'appliquait à TOUTES les impressions de l'app
et masquait #premiumPrintZone du module astro (bug print page blanche
du 2026-05-07 fix). */
body.printing-karma * { visibility: hidden !important; }
/* AGRESSIF : navy bg + texte clair (équivalent au #ffffff/#1a1a1a original mais dark theme) */
body.printing-karma, #karmaResultView, #karmaResultView *,
#karmaResultView *::before, #karmaResultView *::after {
background: #020617 !important;
background-image: none !important;
background-color: #020617 !important;
color: #e5e7eb !important;
text-shadow: none !important;
box-shadow: none !important;
filter: none !important;
animation: none !important;
transform: none !important;
border-color: rgba(212,175,55,0.4) !important;
}
/* Titres / accents en doré sombre lisibles à l'encre */
/* Ouvrir tous les chapitres */
#karmaResultView .reading-chapter-body,
#karmaResultView .karma-chapter-body {
display: block !important;
visibility: visible !important;
}
/* Cacher tout ce qui est interactif/animé */
#karmaResultView button,
#karmaResultView .reading-chapter-btn,
#karmaResultView .karma-chapter-toggle,
#karmaResultView .karma-footer,
#karmaResultView .karma-computing,
#karmaResultView .karma-theater,
#karmaResultView .karma-union-pulse,
#karmaResultView .karma-theater-ring,
#karmaResultView .karma-theater-glyph {
display: none !important;
visibility: hidden !important;
}
/* Bordures discrètes pour les cartes */
/* Orbe d'union : cercle simple à l'encre */
/* Évite les coupures laides */
#karmaResultView .reading-chapter,
#karmaResultView .karma-hero {
page-break-inside: avoid;
}
}
/* ---------- Erreur ---------- */
/* ---------- Mobile ---------- */
@media (max-width: 768px) {
}
/* ====== bloc 3/4 — extrait de index.html L13295 ====== */
@keyframes pl-star-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-30px,0)}}
/* ============ HERO — structure 4 zones (top / counter / typewriter / bottom) ============ */
/* Zone HAUT : logo + titre + sous-titre */
@keyframes pl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Zone COMPTEUR (au tiers haut) */
@keyframes pl-pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
/* Zone TYPEWRITER (centrée pile entre compteur et 150 arcanes) */
@keyframes pl-blink{50%{opacity:0}}
/* Zone BAS : promesse 150 arcanes près du scroll cue */
/* Indicateur de scroll juste sous la promesse */
@keyframes pl-bounce{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}
/* ============ SECTIONS ============ */
/* ============ MODULES ============ */
/* ============ APP / PLAY STORE ============ */
/* ============ FAQ ============ */
/* ============ FOOTER ============ */
/* ============ RESPONSIVE ============ */
@media (max-width:768px){
}
@media (max-width:480px){
}
/* ====== bloc 4/4 — extrait de index.html L15355 ====== */
/* v53 — Section parrainage Mon Coffre */
/* ── PERSONAL HOROSCOPE UI START ── */
/* personal-horoscope-ui.css — bloc inséré dans index.html
* Carte "Mon horoscope personnalisé" en haut de l'onglet horoscope.
*/
#personalHoroscopeContainer {
margin: 0 auto 28px;
max-width: 720px;
padding: 0 12px;
box-sizing: border-box;
}
/* ── HEADER ───────────────────────────────────────────────── */
/* ── ASPECTS GRID ─────────────────────────────────────────── */
@media (max-width: 720px) {
/* Compactage titre + sécu overflow */
/* Layout horizontal compact : une ligne par transit (pas de wrap pour rythme uniforme) */
/* Masque le label natal redondant (le symbole dit déjà l'info) */
}
/* ── TEXT INTERPRÉTATION ──────────────────────────────────── */
@media (min-width: 720px) {
}
/* ── TEASER (no profile) ──────────────────────────────────── */
/* ── BOUTON CTA ──────────────────────────────────────────── */
/* ── PROFILE SELECT ──────────────────────────────────────── */
/* ── LOADING ─────────────────────────────────────────────── */
/* ── SHARE ACTIONS ───────────────────────────────────────── */
/* TTS bouton dans le contexte horoscope perso : aligné sur le bouton Share */
/* ── ERROR ───────────────────────────────────────────────── */
@keyframes ph-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ph-spin {
to { transform: rotate(360deg); }
}
/* ── PERSONAL HOROSCOPE UI END ── */
/* === LABO/SYMBOLES — Fond mystique sur le menu uniquement === */
body:has(#vibrationView.active) {
background:
radial-gradient(ellipse at center, rgba(2,6,23,0.0) 0%, rgba(2,6,23,0.55) 100%),
linear-gradient(rgba(2, 6, 23, 0.28), rgba(2, 6, 23, 0.50)),
url("/images/back_eso_portrait.webp") center center / cover no-repeat fixed
#020617 !important;
}
@media (min-width: 1025px) and (orientation: landscape) {
body:has(#vibrationView.active) {
background:
radial-gradient(ellipse at center, rgba(2,6,23,0.0) 0%, rgba(2,6,23,0.55) 100%),
linear-gradient(rgba(2, 6, 23, 0.28), rgba(2, 6, 23, 0.50)),
url("/images/back_eso_desktop.webp") center center / cover no-repeat fixed
#020617 !important;
}
}
/* ============================================================
PORTAL GATEWAY — premium polish
2026-05-17
============================================================ */
.portal-logo-img {
width: 120px;
height: 120px;
display: block;
margin: 0 auto 24px;
filter: drop-shadow(0 0 36px rgba(212, 175, 55, 0.55));
animation: portalFloat 4s ease-in-out infinite;
}
.portal-title {
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
color: #d4af37 !important;
font-weight: 500 !important;
font-size: clamp(2rem, 5vw, 3rem) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-shadow: 0 0 24px rgba(212, 175, 55, 0.35) !important;
margin-bottom: 14px !important;
text-align: center;
}
.portal-title::before,
.portal-title::after {
content: "◆";
display: inline-block;
color: #d4af37;
font-size: 0.45em;
vertical-align: middle;
margin: 0 0.6em;
opacity: 0.75;
font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
}
.portal-subtitle {
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
color: rgba(212, 175, 55, 0.75) !important;
font-style: italic !important;
font-size: clamp(1rem, 2.4vw, 1.2rem) !important;
letter-spacing: 0.04em !important;
margin-bottom: 36px !important;
text-align: center;
}
.portal-enter-btn {
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
font-weight: 500 !important;
font-size: 1.1rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 14px 44px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08)) !important;
border: 1px solid rgba(212, 175, 55, 0.65) !important;
color: #f0d97a !important;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.35) !important;
transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.portal-enter-btn:hover {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.32), rgba(212, 175, 55, 0.16)) !important;
border-color: #d4af37 !important;
box-shadow: 0 0 28px rgba(212, 175, 55, 0.4), inset 0 0 16px rgba(212, 175, 55, 0.15) !important;
transform: scale(1.04) !important;
}
.portal-enter-btn::before {
content: "◆";
display: inline-block;
margin-right: 0.7em;
font-size: 0.7em;
opacity: 0.85;
vertical-align: middle;
font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
position: static !important;
inset: unset !important;
background: transparent !important;
}
/* Container : ajoute un cadre or subtil + équerres */
.portal-container {
position: relative;
padding: 50px 40px 44px !important;
max-width: 460px;
background: rgba(2, 6, 23, 0.55) !important;
border: 1px solid rgba(212, 175, 55, 0.32) !important;
border-radius: 18px !important;
box-shadow:
0 0 0 1px rgba(212, 175, 55, 0.06) inset,
0 0 60px rgba(212, 175, 55, 0.12),
0 12px 36px rgba(0, 0, 0, 0.6);
}
.portal-container::before,
.portal-container::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border: 1px solid #d4af37;
pointer-events: none;
}
.portal-container::before {
top: 10px; left: 10px; border-right: none; border-bottom: none;
}
.portal-container::after {
bottom: 10px; right: 10px; border-left: none; border-top: none;
}
/* Portal : retirer équerres */
.portal-container::before,
.portal-container::after {
content: none !important;
}
/* ============================================================
TOP BAR — pills or (mute, settings, back global)
============================================================ */
.top-bar-btn,
#globalBackBtn,
#muteBtn,
#settingsBtn {
background: rgba(2, 6, 23, 0.65) !important;
border: 1px solid rgba(212, 175, 55, 0.45) !important;
color: #d4af37 !important;
border-radius: 999px !important;
padding: 8px 14px !important;
font-size: 0.9rem !important;
transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.top-bar-btn:hover,
#globalBackBtn:hover,
#muteBtn:hover,
#settingsBtn:hover {
border-color: #d4af37 !important;
background: rgba(212, 175, 55, 0.08) !important;
color: #f0d97a !important;
box-shadow: 0 0 14px rgba(212, 175, 55, 0.25) !important;
}
/* Force hide global back button on home root */
body:has(#homeRootView.active) #globalBackBtn {
display: none !important;
}
/* ============================================================
PARAMÈTRES — polish gold premium
2026-05-17
============================================================ */
#settingsView .result-card {
position: relative;
background: rgba(2, 6, 23, 0.6) !important;
border: 1px solid rgba(212, 175, 55, 0.32) !important;
border-radius: 14px !important;
padding: 32px 32px 28px !important;
max-width: 480px !important;
margin: 32px auto !important;
box-shadow:
0 0 0 1px rgba(212, 175, 55, 0.06) inset,
0 0 32px rgba(212, 175, 55, 0.10),
0 12px 36px rgba(0, 0, 0, 0.55);
}
#settingsView .result-title {
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
color: #d4af37 !important;
font-weight: 500 !important;
font-size: 1.5rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
text-align: center !important;
text-shadow: 0 0 16px rgba(212, 175, 55, 0.3);
margin-bottom: 6px !important;
}
#settingsView .result-title::before,
#settingsView .result-title::after {
content: "◆";
display: inline-block;
color: #d4af37;
font-size: 0.55em;
vertical-align: middle;
margin: 0 0.6em;
opacity: 0.75;
font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
}
#settingsView .result-subtitle {
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
color: rgba(212, 175, 55, 0.7) !important;
font-style: italic !important;
letter-spacing: 0.04em !important;
text-align: center !important;
margin-bottom: 18px !important;
}
#settingsView .field-block {
background: rgba(2, 6, 23, 0.4) !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
border-radius: 12px !important;
padding: 16px 18px !important;
margin: 0 !important;
}
#settingsView .field-block::before,
#settingsView .field-block::after {
display: none !important;
content: none !important;
}
#settingsView .field-title {
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
color: #d4af37 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
font-size: 0.78rem !important;
text-align: center !important;
margin-bottom: 10px !important;
}
/* Sound level toggle */
#settingsView .sound-level-toggle {
display: flex;
gap: 8px;
justify-content: center;
}
#settingsView .sound-level-btn {
flex: 1;
background: rgba(2, 6, 23, 0.55) !important;
border: 1px solid rgba(212, 175, 55, 0.35) !important;
color: rgba(212, 175, 55, 0.75) !important;
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
font-size: 0.85rem !important;
letter-spacing: 0.08em !important;
padding: 10px 8px !important;
border-radius: 10px !important;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
#settingsView .sound-level-btn:hover:not(.active) {
border-color: rgba(212, 175, 55, 0.6) !important;
color: #d4af37 !important;
background: rgba(212, 175, 55, 0.05) !important;
}
#settingsView .sound-level-btn.active {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08)) !important;
border-color: #d4af37 !important;
color: #f0d97a !important;
box-shadow: 0 0 14px rgba(212, 175, 55, 0.25) !important;
}
/* Volume slider */
#settingsView #musicVolumeRange {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 4px;
background: linear-gradient(90deg, rgba(2,6,23,0.6), rgba(212,175,55,0.3), rgba(2,6,23,0.6));
border-radius: 999px;
outline: none;
}
#settingsView #musicVolumeRange::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #d4af37;
border: 2px solid #f0d97a;
cursor: pointer;
box-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}
#settingsView #musicVolumeRange::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #d4af37;
border: 2px solid #f0d97a;
cursor: pointer;
box-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}
/* Boutons compte : outline gold serif (override les linear-gradient inline) */
#settingsView #openSubscribeBtn,
#settingsView #openSupportBtn,
#settingsView #openCreditsBtn,
#settingsView #openReviewBtn,
#settingsView #openNotifPrefBtn {
background: transparent !important;
background-image: none !important;
border: 1px solid rgba(212, 175, 55, 0.5) !important;
color: #d4af37 !important;
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
font-size: 0.95rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 11px 22px !important;
border-radius: 999px !important;
transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
#settingsView #openSubscribeBtn:hover,
#settingsView #openSupportBtn:hover,
#settingsView #openCreditsBtn:hover,
#settingsView #openReviewBtn:hover,
#settingsView #openNotifPrefBtn:hover {
border-color: #d4af37 !important;
background: rgba(212, 175, 55, 0.08) !important;
color: #f0d97a !important;
box-shadow: 0 0 14px rgba(212, 175, 55, 0.25) !important;
}
/* Le bouton Premium mis en avant : rempli or */
#settingsView #openSubscribeBtn {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.10)) !important;
color: #f0d97a !important;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
#settingsView #openSubscribeBtn:hover {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.32), rgba(212, 175, 55, 0.16)) !important;
}
/* Déconnexion */
#settingsView #logoutBtn {
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
color: rgba(212, 175, 55, 0.55) !important;
font-size: 0.88rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
opacity: 1 !important;
}
#settingsView #logoutBtn:hover {
color: #d4af37 !important;
}
/* ======================================================
Sous-titres menu Labo Ésotérique (test mobile uniquement)
====================================================== */
.home-card .home-subtitle {
display: none;
}
@media (max-width: 768px) {
#vibrationView .home-card .home-subtitle {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 4px;
max-width: 96%;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
text-align: center;
line-height: 1.25;
color: rgba(214, 211, 193, 0.72);
text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}
#vibrationView .home-card .home-title {
margin-top: 8px;
}
#vibrationView .home-card img {
aspect-ratio: 1 / 0.88;
object-fit: cover;
}
}
/* Force 2-line reservation for all subtitles (fix alignment) */
@media (max-width: 768px) {
#vibrationView .home-card .home-subtitle {
min-height: 2.4em;
}
}
/* Colors: title gold, subtitle cream — Labo Ésotérique mobile only */
@media (max-width: 768px) {
#vibrationView .home-card .home-title {
color: #d4af37 !important;
text-shadow:
0 0 6px rgba(0, 0, 0, 0.85),
0 0 12px rgba(212, 175, 55, 0.25) !important;
}
#vibrationView .home-card .home-subtitle {
color: #d6d3c1;
}
}
/* Tighten gap between title and subtitle */
@media (max-width: 768px) {
#vibrationView .home-card .home-subtitle {
margin-top: 2px;
}
}
/* Collapse title reserved height (only 1 word here, no need for 2.2rem) */
@media (max-width: 768px) {
#vibrationView .home-card .home-title {
height: auto !important;
min-height: 0 !important;
-webkit-line-clamp: 1 !important;
margin-bottom: 0 !important;
}
#vibrationView .home-card .home-subtitle {
margin-top: 2px !important;
}
}
/* Gold border on Labo Ésotérique tiles (mobile test) */
@media (max-width: 768px) {
#vibrationView .home-card {
border-color: rgba(212, 175, 55, 0.45);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75),
0 0 12px rgba(212, 175, 55, 0.08);
}
}
/* ======================================================
Accueil principal (homeRootView) — même recette que Labo Ésotérique
Mobile only, scoped to #homeRootView
====================================================== */
@media (max-width: 768px) {
#homeRootView .home-card {
border-color: rgba(212, 175, 55, 0.45);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75),
0 0 12px rgba(212, 175, 55, 0.08);
}
#homeRootView .home-card .root-card-title {
color: #d4af37 !important;
text-shadow:
0 0 6px rgba(0, 0, 0, 0.85),
0 0 12px rgba(212, 175, 55, 0.25) !important;
height: auto !important;
min-height: 0 !important;
-webkit-line-clamp: 1 !important;
margin-bottom: 0 !important;
}
#homeRootView .home-card .home-subtitle {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 2px;
max-width: 96%;
min-height: 2.4em;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
text-align: center;
line-height: 1.25;
color: #d6d3c1;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}
#homeRootView .home-card .root-card-inner {
aspect-ratio: 1 / 0.88;
}
}
/* ======================================================
Menu Tarot (homeView) — même recette
====================================================== */
@media (max-width: 768px) {
#homeView .home-card {
border-color: rgba(212, 175, 55, 0.45);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75),
0 0 12px rgba(212, 175, 55, 0.08);
}
#homeView .home-card .home-title {
color: #d4af37 !important;
text-shadow:
0 0 6px rgba(0, 0, 0, 0.85),
0 0 12px rgba(212, 175, 55, 0.25) !important;
height: auto !important;
min-height: 0 !important;
-webkit-line-clamp: 1 !important;
margin-bottom: 0 !important;
}
#homeView .home-card .home-subtitle {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 2px;
max-width: 96%;
min-height: 2.4em;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
text-align: center;
line-height: 1.25;
color: #d6d3c1;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}
#homeView .home-card img {
aspect-ratio: 1 / 0.88;
}
}
/* ======================================================
Menu Numérologie (numeroView) — même recette
====================================================== */
@media (max-width: 768px) {
#numeroView .home-card {
border-color: rgba(212, 175, 55, 0.45);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75),
0 0 12px rgba(212, 175, 55, 0.08);
}
#numeroView .home-card .home-title {
color: #d4af37 !important;
text-shadow:
0 0 6px rgba(0, 0, 0, 0.85),
0 0 12px rgba(212, 175, 55, 0.25) !important;
height: auto !important;
min-height: 0 !important;
-webkit-line-clamp: 1 !important;
margin-bottom: 0 !important;
}
#numeroView .home-card .home-subtitle {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 2px;
max-width: 96%;
min-height: 2.4em;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
text-align: center;
line-height: 1.25;
color: #d6d3c1;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}
#numeroView .home-card img {
aspect-ratio: 1 / 0.88;
}
}
/* ======================================================
Menu Astrologie (astroView) — même recette
====================================================== */
@media (max-width: 768px) {
#astroView .home-card {
border-color: rgba(212, 175, 55, 0.45);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75),
0 0 12px rgba(212, 175, 55, 0.08);
}
#astroView .home-card .home-title {
color: #d4af37 !important;
text-shadow:
0 0 6px rgba(0, 0, 0, 0.85),
0 0 12px rgba(212, 175, 55, 0.25) !important;
height: auto !important;
min-height: 0 !important;
-webkit-line-clamp: 1 !important;
margin-bottom: 0 !important;
}
#astroView .home-card .home-subtitle {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 2px;
max-width: 96%;
min-height: 2.4em;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
text-align: center;
line-height: 1.25;
color: #d6d3c1;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}
#astroView .home-card img {
aspect-ratio: 1 / 0.88;
}
}
/* ======================================================
GRAND ÉCRAN — Recette uniforme 5 menus
- ≥769px : afficher sous-titres + style or
- ≥900px : passer en 1×4 horizontal
====================================================== */
@media (min-width: 769px) {
/* Gold borders */
#homeRootView .home-card,
#homeView .home-card,
#astroView .home-card,
#numeroView .home-card,
#vibrationView .home-card {
border-color: rgba(212, 175, 55, 0.45);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75),
0 0 14px rgba(212, 175, 55, 0.10);
}
/* Gold titles */
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
color: #d4af37 !important;
text-shadow:
0 0 6px rgba(0, 0, 0, 0.85),
0 0 14px rgba(212, 175, 55, 0.28) !important;
height: auto !important;
min-height: 0 !important;
-webkit-line-clamp: 1 !important;
font-size: 1.05rem !important;
}
/* Cream subtitles, visible */
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 6px;
max-width: 96%;
min-height: 2.6em;
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
text-align: center;
line-height: 1.4;
color: #d6d3c1;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}
}
/* ≥900px : 1×4 horizontal */
@media (min-width: 900px) {
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
flex-wrap: nowrap !important;
justify-content: center;
gap: 24px 28px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
#homeRootView .home-card,
#homeView .home-card,
#astroView .home-card,
#numeroView .home-card,
#vibrationView .home-card {
flex: 0 0 calc(25% - 22px) !important;
max-width: 260px !important;
padding: 14px;
}
}
/* ≥1200px : ajustement gap & largeur cartes */
@media (min-width: 1200px) {
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
gap: 28px 40px;
max-width: 1280px;
}
#homeRootView .home-card,
#homeView .home-card,
#astroView .home-card,
#numeroView .home-card,
#vibrationView .home-card {
flex: 0 0 calc(25% - 30px) !important;
max-width: 290px !important;
}
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
font-size: 1.15rem !important;
}
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
font-size: 0.9rem;
}
}
/* Override grid-template-columns for 1×4 horizontal on large screens */
@media (min-width: 900px) {
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
max-width: 1200px !important;
gap: 24px 28px !important;
margin-left: auto;
margin-right: auto;
}
#homeRootView .home-card,
#homeView .home-card,
#astroView .home-card,
#numeroView .home-card,
#vibrationView .home-card {
max-width: 100% !important;
flex: none !important;
}
}
@media (min-width: 1200px) {
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
max-width: 1280px !important;
gap: 28px 40px !important;
}
}
/* Grossir les tuiles sur grand écran */
@media (min-width: 1200px) {
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
max-width: 1500px !important;
gap: 32px 48px !important;
padding: 0 40px;
}
#homeRootView .home-card,
#homeView .home-card,
#astroView .home-card,
#numeroView .home-card,
#vibrationView .home-card {
padding: 20px !important;
}
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
font-size: 1.3rem !important;
}
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
font-size: 1rem;
line-height: 1.45;
}
}
@media (min-width: 1600px) {
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
max-width: 1600px !important;
}
}
/* Élargir .app sur desktop pour les menus (grand écran) */
@media (min-width: 1200px) {
body.is-home-root .app,
body.is-menu-view .app {
max-width: 1500px !important;
}
}
@media (min-width: 1600px) {
body.is-home-root .app,
body.is-menu-view .app {
max-width: 1600px !important;
}
}
/* ======================================================
REVERT — 2×2 sur desktop (override le 1×4)
On garde tous les gains visuels (or, bordure, sous-titres)
====================================================== */
@media (min-width: 769px) {
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
max-width: 1000px !important;
gap: 28px 48px !important;
padding: 0 !important;
}
}
@media (min-width: 1200px) {
body.is-home-root .app,
body.is-menu-view .app {
max-width: 1200px !important;
}
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
max-width: 1100px !important;
gap: 36px 64px !important;
}
#homeRootView .home-card,
#homeView .home-card,
#astroView .home-card,
#numeroView .home-card,
#vibrationView .home-card {
padding: 22px !important;
}
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
font-size: 1.4rem !important;
}
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
font-size: 1.05rem;
line-height: 1.5;
}
}
/* ======================================================
AJUSTEMENT — Faire tenir le 2×2 sans scroll sur desktop
====================================================== */
@media (min-width: 769px) {
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
max-width: 760px !important;
gap: 20px 32px !important;
padding: 0 !important;
}
#homeRootView .home-card img,
#homeView .home-card img,
#astroView .home-card img,
#numeroView .home-card img,
#vibrationView .home-card img,
#homeRootView .home-card .root-card-inner,
#homeView .home-card .root-card-inner,
#astroView .home-card .root-card-inner,
#numeroView .home-card .root-card-inner,
#vibrationView .home-card .root-card-inner {
aspect-ratio: 1 / 0.72 !important;
}
}
@media (min-width: 1200px) {
body.is-home-root .app,
body.is-menu-view .app {
max-width: 1000px !important;
}
#homeRootView .home-grid,
#homeView .home-grid,
#astroView .home-grid,
#numeroView .home-grid,
#vibrationView .home-grid {
max-width: 880px !important;
gap: 22px 36px !important;
}
#homeRootView .home-card,
#homeView .home-card,
#astroView .home-card,
#numeroView .home-card,
#vibrationView .home-card {
padding: 14px !important;
}
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
font-size: 1.15rem !important;
}
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
font-size: 0.9rem;
line-height: 1.4;
}
}
/* Image un peu moins squatte pour limiter le crop */
@media (min-width: 769px) {
#homeRootView .home-card img,
#homeView .home-card img,
#astroView .home-card img,
#numeroView .home-card img,
#vibrationView .home-card img,
#homeRootView .home-card .root-card-inner,
#homeView .home-card .root-card-inner,
#astroView .home-card .root-card-inner,
#numeroView .home-card .root-card-inner,
#vibrationView .home-card .root-card-inner {
aspect-ratio: 1 / 0.8 !important;
}
}
/* ======================================================
FOLD 5 / écrans ultra-étroits — Thème natal légende
Collapse 2 col → 1 col pour éviter le débordement à droite
====================================================== */
@media (max-width: 380px) {
.natal-chart-legend {
grid-template-columns: 1fr !important;
gap: 12px !important;
font-size: 11px !important;
padding: 12px !important;
}
}
/* ======================================================
Tablette/Desktop — bumper la typo titres/sous-titres
pour qu'elle ait du poids face aux grandes images
====================================================== */
@media (min-width: 769px) {
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
font-size: 1.55rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
}
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
font-size: 1.05rem !important;
line-height: 1.5 !important;
margin-top: 10px !important;
}
}
@media (min-width: 1200px) {
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
font-size: 1.85rem !important;
letter-spacing: 0.1em !important;
}
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
font-size: 1.2rem !important;
margin-top: 12px !important;
}
}
/* ======================================================
Desktop — dial back typo + show .home-subtitle-ext
====================================================== */
.home-subtitle-ext { display: none; }
@media (min-width: 769px) {
.home-subtitle-ext { display: inline; }
/* Réduire la typo (était 1.55 / 1.05) */
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
font-size: 1.25rem !important;
letter-spacing: 0.06em !important;
}
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
font-size: 0.85rem !important;
line-height: 1.4 !important;
margin-top: 8px !important;
}
}
@media (min-width: 1200px) {
/* Réduire encore (était 1.85 / 1.2) */
#homeRootView .home-card .root-card-title,
#homeView .home-card .home-title,
#astroView .home-card .home-title,
#numeroView .home-card .home-title,
#vibrationView .home-card .home-title {
font-size: 1.4rem !important;
}
#homeRootView .home-card .home-subtitle,
#homeView .home-card .home-subtitle,
#astroView .home-card .home-subtitle,
#numeroView .home-card .home-subtitle,
#vibrationView .home-card .home-subtitle {
font-size: 0.95rem !important;
}
}