Cafédomancie 

.cafe-root {
--bg: #faf8f5 !important; --fg: #2a2a2a !important; --fg-muted: #6b6560 !important; --accent-gold: #c9a96e !important; --accent-copper: #b87333 !important; --accent-gold-light: #e8d5a8 !important; --hero-dark: #0a0a2e !important; --hero-mid: #1a0a2e !important; --hero-light: #2a1a3e !important; --card-bg: #ffffff !important; --card-border: #e8e2d8 !important; --section-alt: #f0ece5 !important; --section-warm: #fdf6ec !important; --faq-bg: #f5f0e8 !important; --symbol-bg: #fffcf5 !important; --text-on-dark: #f0e8d8 !important; --glow-gold: rgba(201,169,110,0.4) !important; --shadow-soft: 0 2px 20px rgba(42,26,10,0.08) !important; --shadow-card: 0 4px 24px rgba(42,26,10,0.06) !important; --radius: 12px !important;
}
.cafe-root {
background: var(--bg) !important; color: var(--fg) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; line-height: 1.75 !important; margin: 0 !important;
}
.cafe-root .gutter {
padding-left: max(16px, env(safe-area-inset-left, 0px)) !important; padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
}
.cafe-root .inner {
max-width: 900px !important; margin: 0 auto !important;
}
.cafe-root h1 {
font-family: 'El Messiri', serif !important; font-weight: 700 !important; font-size: clamp(34px, 5vw, 54.4px) !important; line-height: 1.2 !important; text-wrap: balance !important; margin: 0 !important;
}
.cafe-root h2 {
font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 33px !important; line-height: 1.3 !important; text-wrap: balance !important; margin: 0 0 24px !important; color: var(--fg) !important;
}
@media (max-width: 768px) {
.cafe-root h2 {
font-size: 28px !important;
}
}
.cafe-root h3 {
font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1.4 !important; margin: 0 0 12px !important; color: var(--fg) !important;
}
@media (max-width: 768px) {
.cafe-root h3 {
font-size: 18px !important;
}
}
.cafe-root p {
margin: 0 auto 18px !important; max-width: 75ch !important;
}
@media (max-width: 768px) {
.cafe-root {
font-size: 15px !important;
}
.cafe-root .dict-card p, .cafe-root .faq-a-inner, .cafe-root .symbol-meaning, .cafe-root .cta-card p, .cafe-root .faq-q, .cafe-root .step-text p {
font-size: 15px !important;
}
}
.cafe-root .sr-only {
position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.cafe-root .hero {
background: linear-gradient(170deg, #0a0a2e 0%, #1a0a2e 40%, #2a1a3e 100%) !important; color: var(--text-on-dark) !important; position: relative !important; overflow: hidden !important; padding-block: 60px 80px !important; text-align: center !important;
}
.cafe-root .hero::before {
content: '' !important; position: absolute !important; inset: 0 !important; background:
    radial-gradient(ellipse 600px 400px at 50% 60%, rgba(201,169,110,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 300px 300px at 20% 30%, rgba(184,115,51,0.06) 0%, transparent 60%) !important; pointer-events: none !important;
}
.cafe-root .hero-pattern {
position: absolute !important; inset: 0 !important; opacity: 0.04; pointer-events: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 0L80 40L40 80L0 40Z' fill='none' stroke='%23c9a96e' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='15' fill='none' stroke='%23c9a96e' stroke-width='0.5'/%3E%3Cpath d='M20 20L60 20L60 60L20 60Z' fill='none' stroke='%23c9a96e' stroke-width='0.3'/%3E%3C/svg%3E") !important; background-size: 80px 80px !important;
}
.cafe-root .hero h1 {
color: #fff !important; margin-bottom: 16px !important; position: relative !important; z-index: 1 !important;
}
.cafe-root .hero h1 span {
color: var(--accent-gold) !important;
}
.cafe-root .hero-subtitle {
font-family: 'Poppins', sans-serif !important; font-size: 19.5px !important; color: rgba(240,232,216,0.85) !important; margin-bottom: 40px !important; position: relative !important; z-index: 1 !important;
}
.cafe-root .hero-breadcrumb {
font-size: 14.4px !important; color: rgba(240,232,216,0.5) !important; margin-bottom: 24px !important; position: relative !important; z-index: 1 !important;
}
.cafe-root .hero-breadcrumb a {
color: rgba(240,232,216,0.6) !important; text-decoration: none !important;
}
.cafe-root .hero-breadcrumb a:hover {
color: var(--accent-gold) !important;
}
.cafe-root .cup-container {
position: relative !important; z-index: 2 !important; margin: 0 auto 30px !important; width: 360px !important; height: 360px !important; cursor: pointer !important; perspective: 900px;
}
@media (max-width: 768px) {
.cafe-root .cup-container {
width: 280px !important; height: 290px !important;
}
}
.cafe-root .cup-wrapper {
position: relative !important; width: 100% !important; height: 100% !important;
}
.cafe-root .cup-img {
width: 100% !important; height: auto !important; max-width: 360px !important; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(201,169,110,0.25)); user-select: none !important; -webkit-user-drag: none !important;
}
.cafe-root .cup-container .steam {
display: none !important;
}
.cafe-root .cup-front, .cafe-root .cup-back {
position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.4,0,0.2,1);
}
.cafe-root .cup-back {
opacity: 0; transform: rotateY(8deg) scale(0.96);
}
.cafe-root .cup-container.tipping .cup-front {
transform: rotate(-14deg) translateY(10px) scale(1.04);
}
.cafe-root .cup-container.flipped .cup-front {
opacity: 0; transform: rotateY(-12deg) scale(0.94); pointer-events: none !important;
}
.cafe-root .cup-container.flipped .cup-back {
opacity: 1; transform: rotateY(0) scale(1);
}
.cafe-root .marc-wrap {
position: relative !important; width: 240px !important; height: 240px !important;
}
@media (max-width: 768px) {
.cafe-root .marc-wrap {
width: 210px !important; height: 210px !important;
}
}
.cafe-root #marcCanvas {
border-radius: 50% !important; display: block !important; width: 100% !important; height: 100% !important; box-shadow: 0 0 50px rgba(201,169,110,0.12), inset 0 0 30px rgba(0,0,0,0.4) !important;
}
.cafe-root .marc-symbols {
position: absolute !important; inset: 0 !important; pointer-events: none !important;
}
.cafe-root .marc-hotspot {
position: absolute !important; width: 78px !important; height: 78px !important; margin: -39px 0 0 -39px !important; border-radius: 50% !important; pointer-events: auto !important; cursor: pointer !important; opacity: 0; transform: scale(0.5); border: 1.5px solid rgba(201,169,110,0) !important; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2,0.8,0.3,1.2); -webkit-tap-highlight-color: transparent !important;
}
.cafe-root .marc-hotspot.on {
opacity: 1; transform: scale(1); animation: hotPulse 2.6s ease-in-out infinite;
}
@keyframes hotPulse {
0%,100% {
box-shadow: 0 0 0 0 rgba(201,169,110,0), 0 0 18px rgba(201,169,110,0.35); border-color: rgba(201,169,110,0.55);
}
50% {
box-shadow: 0 0 0 7px rgba(201,169,110,0.08), 0 0 32px rgba(201,169,110,0.65); border-color: rgba(201,169,110,0.95);
}
}
.cafe-root .marc-hotspot:hover {
border-color: #f0dca8 !important;
}
.cafe-root .marc-hotspot.active {
animation: none; border-color: #f5e4b8 !important; box-shadow: 0 0 0 5px rgba(201,169,110,0.2), 0 0 38px rgba(201,169,110,0.85) !important;
}
.cafe-root .marc-hotspot .hot-num {
position: absolute !important; top: -5px; right: -5px !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: linear-gradient(135deg, #d4b87a, #b87333) !important; color: #1a0f08 !important; font: bold 12px Arial, sans-serif !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 6px rgba(0,0,0,0.45) !important;
}
.cafe-root .marc-hint {
position: absolute !important; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap !important; font-family: 'El Messiri', serif !important; font-size: 15.3px !important; color: var(--accent-gold) !important; opacity: 0; transition: opacity 0.8s ease; pointer-events: none !important;
}
.cafe-root .marc-hint.on {
opacity: 0.85;
}
.cafe-root .marc-tooltip {
position: relative !important; z-index: 3 !important; width: min(360px, 92vw) !important; margin: 0 auto !important; max-height: 0; overflow: hidden !important; opacity: 0; transform: translateY(8px); background: rgba(20,12,8,0.97) !important; border: 1px solid rgba(201,169,110,0) !important; border-radius: 14px !important; padding: 0 18px !important; text-align: left !important; color: #f0e8d8 !important; box-shadow: 0 14px 44px rgba(0,0,0,0.55) !important; transition: max-height 0.45s ease, opacity 0.35s ease, transform 0.35s ease, padding 0.35s ease, margin 0.35s ease, border-color 0.35s;
}
.cafe-root .marc-tooltip.on {
max-height: 420px; opacity: 1; transform: translateY(0); padding: 16px 18px 14px !important; margin: 6px auto 26px !important; border-color: rgba(201,169,110,0.5) !important;
}
.cafe-root .marc-tooltip .tt-head {
display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 6px !important;
}
.cafe-root .marc-tooltip .tt-icon {
font-size: 27.2px !important; filter: drop-shadow(0 0 8px rgba(201,169,110,0.7));
}
.cafe-root .marc-tooltip .tt-name {
font-family: 'El Messiri', serif !important; font-size: 18.7px !important; color: var(--accent-gold) !important; line-height: 1.2 !important;
}
.cafe-root .marc-tooltip .tt-zone {
font-size: 13.3px !important; color: rgba(240,232,216,0.6) !important;
}
.cafe-root .marc-tooltip p {
font-family: Arial, sans-serif !important; font-size: 15.3px !important; line-height: 1.55 !important; margin: 0 0 8px !important; color: #f0e8d8 !important;
}
.cafe-root .marc-tooltip a {
color: var(--accent-gold) !important; font-size: 14.4px !important;
}
.cafe-root .marc-tooltip .tt-close {
position: absolute !important; top: 6px; right: 8px !important; background: none !important; border: 0 !important; color: rgba(240,232,216,0.5) !important; font-size: 18.7px !important; cursor: pointer !important; padding: 2px 6px !important;
}
.cafe-root .symbol-card.hl {
outline: 2px solid var(--accent-gold) !important; outline-offset: 3px !important;
}
.cafe-root .steam {
position: absolute !important; top: -32px; left: 50%; transform: translateX(-50%); display: flex !important; gap: 8px !important; z-index: 3 !important; transition: opacity 0.4s ease;
}
.cafe-root .steam-line {
width: 2px !important; height: 48px !important; background: linear-gradient(to top, rgba(201,169,110,0.35), transparent) !important; border-radius: 2px !important; animation: steamRise 2.8s ease-in-out infinite;
}
.cafe-root .steam-line:nth-child(2) {
animation-delay: 0.35s; height: 60px !important;
}
.cafe-root .steam-line:nth-child(3) {
animation-delay: 0.7s; height: 38px !important;
}
.cafe-root .steam-line:nth-child(4) {
animation-delay: 1.0s; height: 52px !important; width: 1.5px !important;
}
.cafe-root .steam-line:nth-child(5) {
animation-delay: 1.3s; height: 34px !important; width: 1.5px !important;
}
@keyframes steamRise {
0% {
opacity: 0; transform: translateY(0) scaleY(0.6) translateX(0);
}
25% {
opacity: 0.5;
}
50% {
opacity: 0.3; transform: translateY(-22px) scaleY(1.1) translateX(4px);
}
75% {
opacity: 0.12;
}
100% {
opacity: 0; transform: translateY(-50px) scaleY(1.4) translateX(-3px);
}
}
.cafe-root .cup-container.flipped .steam {
opacity: 0; pointer-events: none !important;
}
.cafe-root #particles-canvas {
position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important;
}
.cafe-root .btn-gold {
display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 600 !important; color: #0a0a2e !important; background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper)) !important; border: none !important; border-radius: 30px !important; padding: 14px 36px !important; cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s; position: relative !important; z-index: 2 !important; text-decoration: none !important; letter-spacing: 0.02em !important;
}
.cafe-root .btn-gold:hover {
transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,169,110,0.35) !important;
}
@media (max-width: 768px) {
.cafe-root .btn-gold {
font-size: 15px !important; padding: 12px 28px !important;
}
}
.cafe-root .tirage-section {
background: var(--hero-dark) !important; color: var(--text-on-dark) !important; padding-block: 56px 60px !important; position: relative !important; overflow: hidden !important;
}
.cafe-root .tirage-section .tirage-title {
color: #fff !important; text-align: center !important; margin: 0 0 12px !important;
}
.cafe-root .tirage-section .limit-msg {
padding-top: 0 !important;
}
.cafe-root .tirage-section .hero-pattern {
opacity: 0.03;
}
.cafe-root .tirage-results {
display: none !important; max-width: 900px !important; margin: 0 auto !important;
}
.cafe-root .tirage-results.visible {
display: block !important; animation: fadeUp 0.8s ease;
}
@keyframes fadeUp {
from {
opacity: 0; transform: translateY(30px);
}
to {
opacity: 1; transform: translateY(0);
}
}
.cafe-root .symbols-row {
display: flex !important; gap: 20px !important; justify-content: center !important; flex-wrap: wrap !important; margin-bottom: 40px !important;
}
.cafe-root .symbol-card {
flex: 1 !important; min-width: 240px !important; max-width: 300px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(201,169,110,0.2) !important; border-radius: var(--radius) !important; padding: 28px 20px !important; text-align: center !important; position: relative !important; overflow: hidden !important;
}
.cafe-root .symbol-card::before {
content: '' !important; position: absolute !important; inset: -1px !important; border-radius: var(--radius) !important; background: linear-gradient(135deg, rgba(201,169,110,0.15), transparent 60%) !important; pointer-events: none !important;
}
.cafe-root .symbol-icon {
font-size: 51px !important; margin-bottom: 12px !important; filter: drop-shadow(0 0 12px var(--glow-gold));
}
.cafe-root .symbol-name {
font-family: 'El Messiri', serif !important; font-size: 22.1px !important; color: var(--accent-gold) !important; margin-bottom: 4px !important;
}
.cafe-root .symbol-position {
font-size: 13.6px !important; color: rgba(201,169,110,0.7) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 12px !important;
}
.cafe-root .symbol-meaning {
font-size: 17px !important; line-height: 1.6 !important; color: rgba(240,232,216,0.85) !important;
}
.cafe-root .limit-msg {
display: none !important; text-align: center !important; padding: 20px !important; color: var(--accent-gold) !important; font-family: 'Poppins', sans-serif !important;
}
.cafe-root .email-overlay {
display: none !important; position: fixed !important; inset: 0 !important; background: rgba(10,10,46,0.85) !important; z-index: 100 !important; align-items: center !important; justify-content: center !important;
}
.cafe-root .email-overlay.visible {
display: flex !important;
}
.cafe-root .email-popup {
background: var(--card-bg) !important; color: var(--fg) !important; border-radius: var(--radius) !important; padding: 40px !important; max-width: 440px !important; width: 90% !important; text-align: center !important; box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important; position: relative !important;
}
.cafe-root .email-popup h3 {
font-family: 'El Messiri', serif !important; font-size: 23.8px !important; color: var(--accent-copper) !important; margin-bottom: 12px !important;
}
.cafe-root .email-popup p {
font-size: 16.1px !important; color: var(--fg-muted) !important; margin-bottom: 20px !important;
}
.cafe-root .email-popup input[type="email"] {
width: 100% !important; padding: 12px 16px !important; border: 1px solid var(--card-border) !important; border-radius: 8px !important; font-size: 16px !important; background: var(--bg) !important; color: var(--fg) !important; box-sizing: border-box !important; margin-bottom: 12px !important;
}
.cafe-root .email-popup label {
display: flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 13.9px !important; color: var(--fg-muted) !important; text-align: left !important; margin-bottom: 16px !important; cursor: pointer !important;
}
.cafe-root .email-popup label input[type="checkbox"] {
margin-top: 3px !important; flex-shrink: 0 !important;
}
.cafe-root .email-close {
position: absolute !important; top: 12px; right: 16px !important; background: none !important; border: none !important; font-size: 25.5px !important; color: var(--fg-muted) !important; cursor: pointer !important; line-height: 1 !important;
}
.cafe-root .btn-skip {
background: none !important; border: none !important; color: var(--fg-muted) !important; font-size: 14.4px !important; cursor: pointer !important; text-decoration: underline !important; margin-top: 8px !important;
}
.cafe-root .section {
padding-block: 60px !important;
}
.cafe-root .section-alt {
background: var(--section-alt) !important;
}
.cafe-root .section-warm {
background: var(--section-warm) !important;
}
.cafe-root .section h2 {
text-align: center !important;
}
.cafe-root .intro-grid {
display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; align-items: start !important;
}
@media (max-width: 768px) {
.cafe-root .intro-grid {
grid-template-columns: 1fr !important;
}
}
.cafe-root .intro-image {
background: linear-gradient(135deg, var(--hero-dark), var(--hero-mid)) !important; border-radius: var(--radius) !important; padding: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 250px !important; position: relative !important; overflow: hidden !important;
}
.cafe-root .intro-image svg {
width: 120px !important; height: 120px !important; opacity: 0.7;
}
.cafe-root .kahve-scene {
padding: 0 !important; min-height: 360px !important; aspect-ratio: 1 / 1.05 !important; background: radial-gradient(circle at 50% 42%, #2a1b3f 0%, #140b26 55%, #0a0618 100%) !important; border: 1px solid rgba(201,169,110,0.35) !important; box-shadow: 0 10px 40px rgba(10,6,24,0.35), inset 0 0 60px rgba(201,169,110,0.08) !important; cursor: pointer !important; touch-action: none !important; user-select: none !important; -webkit-user-select: none !important;
}
.cafe-root #kahveCanvas {
position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important;
}
.cafe-root .kahve-caption {
position: absolute !important; left: 0; right: 0 !important; bottom: 14px !important; text-align: center !important; pointer-events: none !important; transition: opacity 0.5s;
}
.cafe-root .kahve-title {
display: block !important; font-family: 'El Messiri', serif !important; font-size: 23px !important; color: #f0dca8 !important; text-shadow: 0 0 14px rgba(201,169,110,0.6) !important; letter-spacing: 0.04em !important;
}
.cafe-root .kahve-hint {
display: block !important; font-family: 'Poppins', sans-serif !important; font-size: 13.3px !important; color: rgba(240,232,216,0.75) !important; margin-top: 2px !important; animation: kahveHint 2.6s ease-in-out infinite;
}
@keyframes kahveHint {
0%,100% {
opacity: 0.55;
}
50% {
opacity: 1;
}
}
.cafe-root .kahve-scene.active .kahve-caption {
opacity: 0;
}
.cafe-root .kahve-toast {
position: absolute !important; top: 12px; left: 14px; right: 14px !important; width: auto !important; max-width: none !important; transform: translateY(-6px); box-sizing: border-box !important; overflow-wrap: anywhere !important; word-break: break-word !important; background: rgba(10,6,24,0.88) !important; border: 1px solid rgba(201,169,110,0.55) !important; color: #f0dca8 !important; font-family: 'El Messiri', serif !important; font-size: 16.1px !important; line-height: 1.35 !important; padding: 8px 14px !important; border-radius: 14px !important; white-space: normal !important; text-align: center !important; opacity: 0; transition: opacity 0.4s, transform 0.4s; pointer-events: none !important; z-index: 3 !important;
}
@media (max-width: 768px) {
.cafe-root .kahve-toast {
font-size: 15px !important; padding: 7px 12px !important;
}
}
.cafe-root .kahve-toast.on {
opacity: 1; transform: translateY(0);
}
@media (max-width: 768px) {
.cafe-root .kahve-scene {
min-height: 300px !important;
}
}
.cafe-root .zones-diagram {
display: flex !important; justify-content: center !important; margin: 40px auto !important;
}
.cafe-root .zones-svg {
width: 100% !important; max-width: 400px !important; height: auto !important;
}
.cafe-root .dict-search {
display: flex !important; justify-content: center !important; margin-bottom: 32px !important;
}
.cafe-root .dict-search input {
width: 100% !important; max-width: 400px !important; padding: 12px 20px !important; border: 1px solid var(--card-border) !important; border-radius: 30px !important; font-size: 16px !important; background: var(--card-bg) !important; color: var(--fg) !important;
}
.cafe-root .dict-grid {
display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 16px !important;
}
.cafe-root .dict-card {
background: var(--symbol-bg) !important; border: 1px solid var(--card-border) !important; border-radius: var(--radius) !important; padding: 20px !important; transition: box-shadow 0.2s;
}
.cafe-root .dict-card:hover {
box-shadow: var(--shadow-card) !important;
}
.cafe-root .dict-card-head {
display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 8px !important;
}
.cafe-root .dict-card-icon {
font-size: 30.6px !important; width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, rgba(201,169,110,0.1), rgba(184,115,51,0.08)) !important; border-radius: 10px !important; flex-shrink: 0 !important;
}
.cafe-root .dict-card-name {
font-family: 'El Messiri', serif !important; font-weight: 600 !important; font-size: 18.7px !important; color: var(--accent-copper) !important;
}
.cafe-root .dict-card-cat {
font-size: 12.8px !important; color: var(--fg-muted) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important;
}
.cafe-root .dict-card p {
font-size: 17px !important; line-height: 1.6 !important; margin: 0 !important; color: var(--fg-muted) !important;
}
.cafe-root .steps-list {
display: flex !important; flex-direction: column !important; gap: 24px !important; max-width: 700px !important; margin: 0 auto !important;
}
.cafe-root .step-item {
display: flex !important; gap: 20px !important; align-items: flex-start !important;
}
.cafe-root .step-num {
width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper)) !important; color: #0a0a2e !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; font-size: 18.7px !important; border-radius: 50% !important; flex-shrink: 0 !important;
}
.cafe-root .step-text h3 {
margin-bottom: 6px !important;
}
.cafe-root .step-text p {
margin: 0 !important; font-size: 17px !important; color: var(--fg-muted) !important;
}
.cafe-root .cta-section {
background: linear-gradient(170deg, #0a0a2e 0%, #1a0a2e 50%, #2a1a3e 100%) !important; color: var(--text-on-dark) !important; padding-block: 60px !important; text-align: center !important; position: relative !important; overflow: hidden !important;
}
.cafe-root .cta-section .hero-pattern {
opacity: 0.03;
}
.cafe-root .cta-section h2 {
color: #fff !important;
}
.cafe-root .cta-section p {
color: rgba(240,232,216,0.8) !important;
}
.cafe-root .cta-cards {
display: flex !important; gap: 24px !important; justify-content: center !important; flex-wrap: wrap !important; margin-top: 32px !important;
}
.cafe-root .cta-card {
background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(201,169,110,0.2) !important; border-radius: var(--radius) !important; padding: 32px 24px !important; max-width: 340px !important; flex: 1 !important; min-width: 260px !important; text-align: center !important;
}
.cafe-root .cta-card h3 {
font-family: 'El Messiri', serif !important; color: var(--accent-gold) !important; margin-bottom: 12px !important;
}
.cafe-root .cta-card p {
font-size: 17px !important; margin-bottom: 20px !important;
}
.cafe-root .cta-card a {
display: inline-block !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: #0a0a2e !important; background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper)) !important; border-radius: 30px !important; padding: 10px 28px !important; text-decoration: none !important; transition: transform 0.2s;
}
.cafe-root .cta-card a:hover {
transform: translateY(-2px);
}
.cafe-root .fc-cta {
position: relative !important; overflow: hidden !important; background: linear-gradient(120deg, #120a24 0%, #2a1a3e 55%, #3b1f4a 100%) !important; color: var(--text-on-dark) !important; padding-block: 54px !important;
}
.cafe-root #fcCta1 {
background: linear-gradient(120deg, #3a0f1f 0%, #5e1f33 50%, #7b2f3d 100%) !important;
}
.cafe-root #fcCta1 .fc-orb.o1 {
background: rgba(232,213,168,0.35) !important;
}
.cafe-root #fcCta1 .fc-orb.o2 {
background: rgba(201,169,110,0.4) !important;
}
.cafe-root #fcCta1 .fc-badge {
background: linear-gradient(135deg, #f3e4c0, #e0c080) !important; color: #3a0f1f !important;
}
.cafe-root .fc-cta .fc-orb {
position: absolute !important; border-radius: 50% !important; filter: blur(40px); opacity: 0.55; pointer-events: none !important; animation: fcOrb 9s ease-in-out infinite;
}
.cafe-root .fc-cta .fc-orb.o1 {
width: 260px !important; height: 260px !important; left: -60px; top: -80px; background: rgba(201,169,110,0.35) !important;
}
.cafe-root .fc-cta .fc-orb.o2 {
width: 300px !important; height: 300px !important; right: -90px !important; bottom: -120px !important; background: rgba(184,115,51,0.35) !important; animation-delay: -4s;
}
@keyframes fcOrb {
0%,100% {
transform: translate(0,0) scale(1);
}
50% {
transform: translate(30px,-20px) scale(1.15);
}
}
.cafe-root .fc-cta .inner {
position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; gap: 36px !important; flex-wrap: wrap !important; justify-content: center !important;
}
.cafe-root .fc-cta .fc-visual {
width: 150px !important; height: 150px !important; flex-shrink: 0 !important; position: relative !important;
}
.cafe-root .fc-cta .fc-visual svg {
width: 100% !important; height: 100% !important;
}
.cafe-root .fc-cta .fc-ring {
transform-origin: 50% 50%; animation: fcSpin 18s linear infinite;
}
.cafe-root .fc-cta .fc-ring2 {
transform-origin: 50% 50%; animation: fcSpin 26s linear infinite reverse;
}
@keyframes fcSpin {
to {
transform: rotate(360deg);
}
}
.cafe-root .fc-cta .fc-eye {
animation: fcBreath 3.2s ease-in-out infinite; transform-origin: 50% 50%;
}
@keyframes fcBreath {
0%,100% {
opacity: 0.75; transform: scale(1);
}
50% {
opacity: 1; transform: scale(1.08);
}
}
.cafe-root .fc-cta .fc-text {
flex: 1 !important; min-width: 260px !important; max-width: 560px !important; text-align: left !important;
}
.cafe-root .fc-cta .fc-badge {
display: inline-block !important; font-family: 'Poppins', sans-serif !important; font-size: 12.8px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #1a0f2e !important; background: linear-gradient(135deg, #e8d5a8, var(--accent-gold)) !important; padding: 5px 12px !important; border-radius: 20px !important; margin-bottom: 12px !important;
}
.cafe-root .fc-cta h2 {
color: #fff !important; text-align: left !important; font-size: 28px !important; margin-bottom: 10px !important;
}
.cafe-root .fc-cta p {
color: rgba(240,232,216,0.82) !important; margin: 0 0 18px !important; max-width: none !important;
}
.cafe-root .fc-cta .fc-btn {
display: inline-flex !important; align-items: center !important; gap: 10px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: #1a0f2e !important; background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper)) !important; border-radius: 30px !important; padding: 14px 32px !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; box-shadow: 0 8px 28px rgba(201,169,110,0.3) !important; animation: fcPulse 2.6s ease-in-out infinite;
}
.cafe-root .fc-cta .fc-btn::after {
content: '' !important; position: absolute !important; top: 0; left: -80%; width: 50% !important; height: 100% !important; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent) !important; transform: skewX(-20deg); animation: fcShine 3s ease-in-out infinite;
}
@keyframes fcShine {
0% {
left: -80%;
}
45%,100% {
left: 130%;
}
}
@keyframes fcPulse {
0%,100% {
box-shadow: 0 8px 28px rgba(201,169,110,0.3);
}
50% {
box-shadow: 0 10px 40px rgba(201,169,110,0.55);
}
}
.cafe-root .fc-cta .fc-btn:hover {
transform: translateY(-2px);
}
.cafe-root .fc-cta .fc-btn svg {
transition: transform 0.3s;
}
.cafe-root .fc-cta .fc-btn:hover svg {
transform: translateX(4px);
}
@media (max-width: 768px) {
.cafe-root .fc-cta .inner {
text-align: center !important;
}
.cafe-root .fc-cta .fc-text {
text-align: center !important;
}
.cafe-root .fc-cta h2 {
text-align: center !important; font-size: 24px !important;
}
.cafe-root .fc-cta .fc-visual {
width: 120px !important; height: 120px !important;
}
.cafe-root .fc-cta .fc-btn {
font-size: 15px !important; padding: 12px 26px !important;
}
}
.cafe-root .faq-section {
background: var(--faq-bg) !important;
}
.cafe-root .faq-list {
max-width: 750px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important;
}
.cafe-root .faq-item {
background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: var(--radius) !important; overflow: hidden !important;
}
.cafe-root .faq-q {
display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 20px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 17px !important; background: none !important; border: none !important; width: 100% !important; text-align: left !important; color: var(--fg) !important; gap: 12px !important;
}
.cafe-root .faq-q:hover {
color: var(--accent-copper) !important;
}
.cafe-root .faq-chevron {
transition: transform 0.3s; flex-shrink: 0 !important; color: var(--accent-gold) !important;
}
.cafe-root .faq-item.open .faq-chevron {
transform: rotate(180deg);
}
.cafe-root .faq-a {
max-height: 0; overflow: hidden !important; transition: max-height 0.4s ease;
}
.cafe-root .faq-a-inner {
padding: 0 20px 18px !important; font-size: 17px !important; line-height: 1.7 !important; color: var(--fg-muted) !important;
}
.cafe-root .footer-links {
background: var(--section-alt) !important; padding-block: 40px !important; text-align: center !important;
}
.cafe-root .footer-links nav {
display: flex !important; gap: 24px !important; justify-content: center !important; flex-wrap: wrap !important;
}
.cafe-root .footer-links a {
color: var(--accent-copper) !important; text-decoration: none !important; font-size: 15.6px !important;
}
.cafe-root .footer-links a:hover {
text-decoration: underline !important;
}
@keyframes pulse-glow {
0%, 100% {
filter: drop-shadow(0 0 8px var(--glow-gold));
}
50% {
filter: drop-shadow(0 0 20px var(--glow-gold));
}
}
.cafe-root .glow-pulse {
animation: pulse-glow 2.5s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.cafe-root .float-anim {
animation: float 4s ease-in-out infinite;
}
.cafe-root .ornament {
text-align: center !important; margin: 0 auto 32px !important; color: var(--accent-gold) !important; font-size: 23.8px !important; opacity: 0.5; letter-spacing: 0.5em !important;
}
.cafe-root .hero, .cafe-root .tirage-section, .cafe-root .section, .cafe-root .cta-section, .cafe-root .footer-links { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; box-sizing: border-box !important; border-radius: 0 !important; }
.cafe-root .inner { max-width: 1080px !important; }
.cafe-root .cafe-hide { display: none !important; }
.cafe-root .limit-msg.cafe-show { display: block !important; }
.cafe-root .btn-gold.cafe-show { display: inline-flex !important; }
.cafe-root .symbol-card.sealed .symbol-meaning { filter: blur(6px); user-select: none !important; pointer-events: none !important; }
.cafe-root .symbol-card .seal-btn { display: none !important; }
.cafe-root .symbol-card.sealed .seal-btn { display: inline-flex !important; position: absolute !important; left: 50% !important; bottom: 26px !important; transform: translateX(-50%); font-size: 14px !important; padding: 9px 18px !important; white-space: nowrap !important; }
.cafe-root .seal-note { font-family: Arial, sans-serif !important; font-size: 15.3px !important; color: #f0e8d8 !important; margin: 0 0 8px !important; }
.cafe-root .email-screen { display: none !important; }
.cafe-root .email-screen.on { display: block !important; }
.cafe-root .email-popup .cafe-err { display: none !important; color: #b8432f !important; font-size: 14.4px !important; margin: -6px 0 10px !important; }
.cafe-root .email-popup .cafe-err.on { display: block !important; }
.cafe-root .email-popup .btn-gold[disabled] { opacity: 0.6; cursor: wait !important; }
.cafe-root .email-popup .btn-gold.btn-link { background: none !important; color: #b87333 !important; text-decoration: underline !important; padding: 6px 0 !important; }
.cafe-root .email-popup .success-icon { font-size: 51px !important; margin-bottom: 12px !important; }
.cafe-root .email-popup a.btn-gold { color: #0a0a2e !important; }
.cafe-root .marc-tooltip .seal-btn { margin-top: 4px !important; font-size: 13px !important; padding: 8px 16px !important; }
.cafe-root .hero, .cafe-root .tirage-section, .cafe-root .cta-section { color: #f0e8d8 !important; }
.cafe-root .hero p, .cafe-root .cta-section p { color: rgba(240,232,216,0.85) !important; }
.cafe-root h2 { text-transform: none !important; letter-spacing: 0 !important; }
.cafe-root .email-popup label a { color: #b87333 !important; text-decoration: underline !important; }
.cafe-root .email-popup label span { flex: 1 !important; }
.cafe-root .tirage-section .tirage-title { color: #fff !important; }
.cafe-root .dict-card p, .cafe-root .step-text p, .cafe-root .faq-a-inner { max-width: none !important; }

Cafédomancie Gratuite

Lire le marc de café gratuitement : tirage interactif et dictionnaire des symboles de cafédomancie

Retournez votre tasse virtuelle et découvrez ce que le marc de café révèle sur votre avenir. Art millénaire ottoman, interprétation instantanée.






Tasse de café turc Astroya, porcelaine bleu nuit et or, prête pour la lecture du marc
Touchez les 3 formes dorées pour les lire


Votre Tirage

Les symboles du marc de café révèlent trois messages pour vous

☕ Vous avez utilisé vos 3 tirages du jour

Revenez demain pour consulter le marc de café à nouveau. La patience est une vertu que le café récompense.

◆ ◆ ◆

Qu’est-ce que la Cafédomancie ?

La cafédomancie, également appelée tasséomancie ou lecture du marc de café, est un art divinatoire ancestral qui consiste à interpréter les figures formées par le marc de café au fond et sur les parois d’une tasse. Pratiquée depuis le XVIᵉ siècle dans l’Empire ottoman, cette méthode de divination s’est répandue à travers le Moyen-Orient, la Grèce, les Balkans et la Perse avant de séduire l’Europe entière.

En turc, on parle de Kahve Falı (« la fortune par le café »). Cette pratique est profondément ancrée dans la culture ottomane, où le rituel du café turc accompagne chaque moment important de la vie : fiançailles, décisions familiales, accueil des hôtes. On dit que « le café doit être noir comme l’enfer, fort comme la mort et doux comme l’amour ».

Contrairement à d’autres arts divinatoires qui nécessitent des outils spécifiques, la cafédomancie repose sur un geste quotidien et intime : boire une tasse de café. C’est cette simplicité qui en fait l’un des arts les plus accessibles et les plus chargés en émotion.

◆ ◆ ◆

Origines et Histoire de la Cafédomancie

L’histoire de la cafédomancie est indissociable de celle du café lui-même. Les premières traces de lecture du marc de café remontent au XVIᵉ siècle dans les cafés de Constantinople (Istanbul), hauts lieux de culture et de socialisation de l’Empire ottoman. Les derviches soufis, réputés pour leur connexion au monde spirituel, auraient été parmi les premiers à reconnaître des symboles signifiants dans les résidus de café.

La pratique s’est ensuite transmise aux femmes du harem, qui en firent un art raffiné, puis aux ménages de toutes classes sociales. Au XVIIIᵉ siècle, la cafédomancie voyage vers la Grèce, l’Arménie, le Liban et l’Iran, chaque culture y apportant ses propres symboles et interprétations. En Grèce, on parle de kafemandeia ; en arabe, de qira’at al-finjan (lecture de la tasse).

En Europe occidentale, la cafédomancie s’installe au XIXᵉ siècle dans les salons, souvent pratiquée par des voyantes et des gitanes itinérantes. Des auteurs comme Sylvie Cariou ont contribué à documenter cet art en français, rendant les symboles accessibles au grand public. Aujourd’hui, la cafédomancie connaît un renouveau grâce au numérique, permettant à chacun de découvrir cette tradition depuis chez soi.

◆ ◆ ◆

Les Zones de la Tasse en Cafédomancie

Chaque partie de la tasse possède une signification temporelle et symbolique. Comprendre la géographie de la tasse est essentiel pour interpréter correctement les symboles du marc de café.

BORD — Futur proche MILIEU — Présent FOND — Passé lointain Anse = Vie personnelle

▲ Le Bord (rebord)

Les symboles proches du bord représentent le futur proche. Ce sont les événements qui se profilent dans les jours ou semaines à venir.

● Le Milieu

La zone centrale de la tasse parle du présent et des préoccupations actuelles du consultant. C’est le cœur du tirage.

▼ Le Fond

Les formes au fond de la tasse évoquent le passé lointain et les fondations profondes de votre parcours.

☞ L’Anse

Les symboles proches de l’anse touchent à votre vie personnelle : foyer, famille, vie intérieure et émotions intimes.



Consultation astro

Ce que le marc ne dit pas, votre thème le sait

Le marc révèle des symboles ; votre thème astral révèle ce qui les anime. Pluton, Chiron, maisons VIII et XII, Nœud Nord : l’étude Vos Forces Cachées met en lumière les ressources profondes que vous n’utilisez pas encore.

Révéler mes forces cachées
◆ ◆ ◆

Comment Lire le Marc de Café ?

Suivez ces étapes traditionnelles pour réaliser une lecture de cafédomancie authentique chez vous.

1

Préparez un café turc traditionnel

Utilisez du café finement moulu (café turc ou café grec). Faites-le chauffer dans un cezve (ibrik) avec de l’eau et du sucre selon votre goût. Ne filtrez pas le marc.

2

Buvez lentement en méditant

Savourez votre café avec intention. Concentrez-vous sur une question ou laissez simplement votre esprit vagabonder. L’essentiel est d’être dans un état de réceptivité.

3

Retournez la tasse sur la soucoupe

Une fois qu’il ne reste plus qu’une gorgée de marc, retournez la tasse d’un geste sûr sur la soucoupe. Laissez reposer 5 à 10 minutes pour que le marc se fige.

4

Soulevez et observez

Retournez délicatement la tasse. Observez les formes, les symboles et les figures que le marc a dessinés sur les parois et le fond. Laissez votre intuition guider votre regard.

5

Interprétez les symboles

Identifiez les formes reconnaissables : animaux, objets, lettres, visages. Consultez notre dictionnaire des 40 symboles ci-dessous pour découvrir leur signification traditionnelle.


Prolongez Votre Expérience Mystique

Découvrez nos outils de connaissance de soi et accompagnez votre rituel de cafédomancie avec des énergies alignées.

🌟

Votre Élément Dominant

Découvrez quel élément (Feu, Terre, Air, Eau) guide votre énergie et influence votre personnalité profonde.

Découvrir mon élément
✨

Vos Talents Naturels

Révélez les talents uniques inscrits dans votre thème et apprenez à les cultiver au quotidien.

Révéler mes talents
◆ ◆ ◆

Dictionnaire des 40 Symboles de Cafédomancie

Retrouvez la signification traditionnelle de chaque symbole du marc de café. Ce dictionnaire s’appuie sur la tradition ottomane, grecque et persane.

◆ ◆ ◆

Questions Fréquentes sur la Cafédomancie



Consultation astro

Allez plus loin que la tasse

Vous avez lu les symboles du jour. Pour comprendre les forces qui travaillent en vous sur le long terme, découvrez l’étude personnalisée Vos Forces Cachées, rédigée à partir de votre thème astral.

Révéler mes forces cachées

Explorez nos autres arts divinatoires

Les informations de cette page sont proposées à titre de bien-être et d'information générale. Elles ne sont pas scientifiquement démontrées et ne constituent en aucun cas un avis, un diagnostic ou un traitement médical. En cas de problème de santé, consultez un professionnel de santé qualifié.