@import url('https://fonts.googleapis.com/css2?family=Kurale&family=Noto+Color+Emoji&display=swap'); body { min-height: 100vh; footer, footer a { color: #6c757d; } } /* Conteneur du fond animé */ .stardust-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; } /* Style de base d'une étoile */ .star { position: absolute; /* Forme d'étoile à 4 branches */ clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); opacity: 0; animation: twinkle-up 10s linear infinite; /* Style par défaut (thème clair) pour éviter que les étoiles soient invisibles si le thème est "auto" */ background: radial-gradient(circle, #ffcf40 0%, rgba(197, 160, 89, 0.6) 100%); filter: drop-shadow(0 0 4px rgba(197, 160, 89, 0.8)); } /* Mode Sombre */ [data-bs-theme="dark"] .star { background: radial-gradient(circle, #ffe082 0%, rgba(197, 160, 89, 0.8) 100%); filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6)); } /* Mode Clair */ [data-bs-theme="light"] .star { background: radial-gradient(circle, #ffcf40 0%, rgba(197, 160, 89, 0.6) 100%); filter: drop-shadow(0 0 4px rgba(197, 160, 89, 0.8)); } /* Animation de mouvement et scintillement */ @keyframes twinkle-up { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { opacity: 1; } 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { opacity: 0.3; } 100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; } } /* Définition des couleurs des signes du zodiaque en tant que variables CSS */ :root { --bs-primary: #8e7cc3; /* Améthyste Douce - Spirituel et élégant */ --bs-primary-rgb: 142, 124, 195; --bs-secondary: #e5989b; /* Quartz Rose - Pour la douceur et l'affect */ --bs-secondary-rgb: 229, 152, 155; /* Thème Clair (Fond du site) */ --bs-body-bg: #fdfbfd; /* Blanc de Soie - Un blanc très légèrement rosé/lavande */ --bs-body-bg-rgb: 253, 251, 253; /* Couleurs de Texte */ --bs-body-color: #4a4a6a; /* Indigo Grisé - Pour une lecture douce mais contrastée */ --bs-body-color-rgb: 74, 74, 106; --bs-tertiary-bg: #F7F1F7; /* Perle Rosée */ --bs-tertiary-bg-rgb: 247, 241, 247; --bs-light: #F7F1F7; --bs-light-rgb: 247, 241, 247; /* Bordures et Séparateurs */ --bs-border-color: #e9ecef; --bs-border-color-translucent: rgba(142, 124, 195, 0.15); /* Liens */ --bs-link-color: #6d5b97; --bs-link-hover-color: #8e7cc3; /* Liens */ --bs-link-color: #c5a059; --bs-link-hover-color: #e2c08d; --zodiac-aries-color: red; --zodiac-taurus-color: #689d71; --zodiac-gemini-color: #77b5fe; --zodiac-cancer-color: #ac7175; --zodiac-leo-color: #c18d41; --zodiac-virgo-color: #955628; --zodiac-libra-color: #FF00FF; --zodiac-scorpio-color: #681951; --zodiac-sagittarius-color: #bf6031; --zodiac-capricorn-color: #7d8080; --zodiac-aquarius-color: #00ef81; --zodiac-pisces-color: #9400D3; } /* Couleurs spécifiques au mode sombre (si l'attribut data-bs-theme="dark" est présent sur ) */ html[data-bs-theme="dark"] { --bs-primary: #c5a059; /* Or Céleste - Pour les actions importantes */ --bs-primary-rgb: 197, 160, 89; --bs-secondary: #45a29e; /* Bleu Sarcelle Éthéré - Pour les éléments secondaires */ --bs-secondary-rgb: 69, 162, 158; /* Thème Sombre (Fond du site) */ --bs-body-bg: #0b0c10; /* Noir Espace Profond */ --bs-body-bg-rgb: 11, 12, 16; /* Couleurs de Texte */ --bs-body-color: #c1c8e4; /* Argent Doux - Pour la lisibilité */ --bs-body-color-rgb: 193, 200, 228; /* Arrière-plans Tertiaires (Cartes, Modales) */ --bs-tertiary-bg: #1f2833; /* Bleu Nuit Foncé */ --bs-tertiary-bg-rgb: 31, 40, 51; /* Éléments de contraste (Light) */ --bs-light: #1f2833; --bs-light-rgb: 31, 40, 51; /* Bordures et Séparateurs */ --bs-border-color: rgba(197, 160, 89, 0.25); /* Or transparent */ --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --zodiac-aries-color: lightcoral; /* Rouge plus clair pour le mode sombre */ --zodiac-taurus-color: #a2d2a2; /* Vert plus clair */ --zodiac-gemini-color: #a7d9ff; /* Bleu plus clair */ --zodiac-cancer-color: #d4a7aa; /* Rose plus clair */ --zodiac-leo-color: #e0b270; /* Orange/marron plus clair */ --zodiac-virgo-color: #c28e6a; /* Marron plus clair */ --zodiac-libra-color: #ffb3ff; /* Magenta plus clair */ --zodiac-scorpio-color: #a05c8c; /* Violet plus clair */ --zodiac-sagittarius-color: #e69c73; /* Orange plus clair */ --zodiac-capricorn-color: #b0b3b3; /* Gris plus clair */ --zodiac-aquarius-color: #66ffb3; /* Vert fluorescent plus clair */ --zodiac-pisces-color: #c28dff; /* Violet plus clair */ } /* Style de base pour toutes les icônes */ .menu-icon { width: 24px; height: 24px; flex-shrink: 0; } .zodiac-signe:hover svg { transform: scale(1.2); } .flip-card { position: relative; perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; min-height: 350px; /* Ajout d'une hauteur minimale pour éviter l'effondrement */ transition: transform 0.6s; transform-style: preserve-3d; } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } .flip-card-back { transform: rotateY(180deg); } .card-body img { float: left; margin-right: 1rem; margin-bottom: 0.5rem; max-width: 100%; height: auto; } /* --- MODE CLAIR --- */ [data-bs-theme="light"] .text-celestial { background: linear-gradient(45deg, #6d5b97, #e5989b, #8e7cc3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; filter: drop-shadow(0px 2px 2px rgba(142, 124, 195, 0.2)); } /* --- MODE SOMBRE --- */ [data-bs-theme="dark"] .text-celestial { background: linear-gradient(45deg, #c5a059, #f1f1f1, #c5a059); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; filter: drop-shadow(0px 0px 10px rgba(197, 160, 89, 0.5)); } /* Classes CKEditor pour les tailles de texte */ .text-tiny { font-size: 0.7rem; } .text-small { font-size: 0.85rem; } .text-big { font-size: 1.25rem; } .text-huge { font-size: 1.8rem; } .card-mystique { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid; } .card-mystique:hover { transform: translateY(-5px); } /* --- MODE CLAIR --- */ [data-bs-theme="light"] .card-mystique { background: rgba(255, 255, 255, 0.6); border-color: rgba(142, 124, 195, 0.3); box-shadow: 0 10px 30px rgba(142, 124, 195, 0.1); } /* --- MODE SOMBRE --- */ [data-bs-theme="dark"] .card-mystique { background: rgba(31, 40, 51, 0.7); border-color: rgba(197, 160, 89, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } /* Couleurs spécifiques pour chaque icône et texte du zodiaque */ .zodiac-aries-color { color: var(--zodiac-aries-color); } .zodiac-aries-color svg { color: var(--zodiac-aries-color); } .zodiac-taurus-color { color: var(--zodiac-taurus-color); } .zodiac-taurus-color svg { color: var(--zodiac-taurus-color); } .zodiac-gemini-color { color: var(--zodiac-gemini-color); } .zodiac-gemini-color svg { color: var(--zodiac-gemini-color); } .zodiac-cancer-color { color: var(--zodiac-cancer-color); } .zodiac-cancer-color svg { color: var(--zodiac-cancer-color); } .zodiac-leo-color { color: var(--zodiac-leo-color); } .zodiac-leo-color svg { color: var(--zodiac-leo-color); } .zodiac-virgo-color { color: var(--zodiac-virgo-color); } .zodiac-virgo-color svg { color: var(--zodiac-virgo-color); } .zodiac-libra-color { color: var(--zodiac-libra-color); } .zodiac-libra-color svg { color: var(--zodiac-libra-color); } .zodiac-scorpio-color { color: var(--zodiac-scorpio-color); } .zodiac-scorpio-color svg { color: var(--zodiac-scorpio-color); } .zodiac-sagittarius-color { color: var(--zodiac-sagittarius-color); } .zodiac-sagittarius-color svg { color: var(--zodiac-sagittarius-color); } .zodiac-capricorn-color { color: var(--zodiac-capricorn-color); } .zodiac-capricorn-color svg { color: var(--zodiac-capricorn-color); } .zodiac-aquarius-color { color: var(--zodiac-aquarius-color); } .zodiac-aquarius-color svg { color: var(--zodiac-aquarius-color); } .zodiac-pisces-color { color: var(--zodiac-pisces-color); } .zodiac-pisces-color svg { color: var(--zodiac-pisces-color); } /* Gestion de l'affichage des boutons de thème */ .theme-toggle-light { display: none; } html[data-bs-theme="dark"] .theme-toggle-light { display: block; } .theme-toggle-dark { display: block; } html[data-bs-theme="dark"] .theme-toggle-dark { display: none; }