/* ============================================================= ❋ DA EMILIE — "Au souffle du vivant sacré" Palette : Forêt profonde · Terre sacrée · Lumière dorée · Âme violette · Souffle ivoire Typo : Cormorant Garamond (display) + Manrope (sans) + Caveat (manuscrite) Forme : courbes organiques, halos chauds, ornements feuilles ============================================================= */ /* Fonts désormais self-hostées via /emilie/fonts/emilie-fonts.css chargé dans le */ :root { /* --- Palette Au souffle du vivant sacré --- */ --terre-sacree: #C17A5A; --terre-sacree-dark: #A05E40; --terre-sacree-soft: #E8B89F; --foret-profonde: #7A9E87; --foret-profonde-dark: #5C7E69; --foret-profonde-soft: #BAD0C2; --lumiere-doree: #D4AF6A; --lumiere-doree-soft: #EFD9A8; --ame-violette: #8B7BA0; --ame-violette-soft: #C0B5CC; --souffle-ivoire: #F5F0E8; --souffle-ivoire-deep: #EBE3D3; --texte-principal: #3A2E26; --texte-doux: #6B5D52; --ombre-naturelle: rgba(58, 46, 38, 0.08); --ombre-profonde: rgba(58, 46, 38, 0.16); /* --- Override variables système (compat Malika legacy) --- */ --gold: var(--foret-profonde) !important; --gold-deep: var(--foret-profonde-dark) !important; --gold-light: var(--lumiere-doree) !important; --gold-soft: var(--lumiere-doree-soft) !important; --or-pur: var(--lumiere-doree) !important; --or-clair: var(--lumiere-doree-soft) !important; --or-profond: var(--terre-sacree-dark) !important; --argent-lune: var(--ame-violette-soft) !important; --beige-sacre: var(--souffle-ivoire) !important; --beige-profond: var(--souffle-ivoire-deep) !important; --noir-divin: var(--texte-principal) !important; --night: #2E2620 !important; --night-2: #1F1A15 !important; --cobalt: var(--ame-violette) !important; --cobalt-light: var(--ame-violette-soft) !important; --cream: var(--souffle-ivoire) !important; --cream-2: var(--souffle-ivoire-deep) !important; --rose-soft: #F0E4D8 !important; --rose: var(--terre-sacree) !important; --emerald: var(--foret-profonde) !important; --text: var(--texte-principal) !important; --muted: var(--texte-doux) !important; --shadow: var(--ombre-naturelle) !important; --shadow-strong: var(--ombre-profonde) !important; --bg: var(--souffle-ivoire) !important; --bg-primary: var(--souffle-ivoire) !important; --bg-secondary: var(--souffle-ivoire-deep) !important; --accent: var(--foret-profonde) !important; --particle-color: 122, 158, 135 !important; --particle-bg-overlay: rgba(245, 240, 232, 0.4) !important; } /* --- Body --- */ body { font-family: 'Manrope', -apple-system, sans-serif !important; background: var(--souffle-ivoire); color: var(--texte-principal); font-weight: 400; } /* --- Texture organique de fond très subtile --- */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(circle at 18% 22%, rgba(212, 175, 106, 0.05), transparent 55%), radial-gradient(circle at 82% 78%, rgba(122, 158, 135, 0.06), transparent 55%), radial-gradient(circle at 50% 50%, rgba(139, 123, 160, 0.03), transparent 65%); mix-blend-mode: multiply; } /* --- Display fonts --- */ h1, h2, h3, h4, .quote-text, .footer-brand h3, .nav-brand, .section-title, .hero-title { font-family: 'Cormorant Garamond', 'Georgia', serif !important; font-weight: 500; letter-spacing: 0.012em; color: var(--texte-principal); } h1 { font-weight: 400 !important; line-height: 1.08; } h1 em, h2 em, .gold { font-style: italic; font-family: 'Cormorant Garamond', serif !important; color: var(--foret-profonde) !important; position: relative; font-weight: 500; } /* --- Caveat utility (signatures, citations courtes) --- */ .caveat, .signature-caveat { font-family: 'Caveat', cursive !important; font-weight: 500; } /* --- Boutons --- */ .btn, .btn-gold, .btn-cobalt { font-family: 'Manrope', sans-serif !important; letter-spacing: 0.05em; border-radius: 999px; padding: 14px 30px; font-weight: 500; transition: all 600ms ease-out !important; } .btn-gold, .btn-primary { background: linear-gradient(135deg, var(--foret-profonde), var(--foret-profonde-dark)) !important; color: var(--souffle-ivoire) !important; border: none !important; box-shadow: 0 6px 22px rgba(122, 158, 135, 0.32); } .btn-gold:hover, .btn-primary:hover { background: linear-gradient(135deg, var(--terre-sacree), var(--terre-sacree-dark)) !important; transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 28px rgba(193, 122, 90, 0.36); } .btn-cobalt, .btn-outline { background: transparent !important; color: var(--lumiere-doree) !important; border: 1.5px solid var(--lumiere-doree) !important; } .btn-cobalt:hover, .btn-outline:hover { background: var(--lumiere-doree) !important; color: var(--souffle-ivoire) !important; } /* --- Nav --- */ .nav, .nav.scrolled { background: rgba(245, 240, 232, 0.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(122, 158, 135, 0.14); } .nav-links a { color: var(--texte-principal) !important; font-family: 'Manrope', sans-serif !important; letter-spacing: 0.05em; font-weight: 500; } .nav-links a:hover, .nav-links a.active { color: var(--foret-profonde) !important; } .nav-brand { color: var(--foret-profonde-dark) !important; } /* --- Sections de fond --- */ .hero { background: radial-gradient(ellipse at 50% 18%, rgba(212, 175, 106, 0.28) 0%, transparent 58%), radial-gradient(ellipse at 22% 82%, rgba(122, 158, 135, 0.22) 0%, transparent 55%), radial-gradient(ellipse at 78% 78%, rgba(193, 122, 90, 0.18) 0%, transparent 55%), linear-gradient(180deg, #2E2620 0%, #1A1410 100%) !important; } .about, .methode, .soins, .promesses, .faq { background: var(--souffle-ivoire) !important; } .quote-section, .tirage-section, .contact { background: linear-gradient(135deg, #2E2620 0%, #1A1410 100%) !important; color: var(--souffle-ivoire); } .testimonials { background: linear-gradient(180deg, var(--souffle-ivoire) 0%, var(--souffle-ivoire-deep) 100%) !important; } footer { background: #2E2620 !important; color: var(--souffle-ivoire); } /* --- Cartes séances --- */ .soin-card, .axe-card { background: #FFFFFF !important; border: 1px solid rgba(122, 158, 135, 0.15) !important; border-radius: 24px !important; box-shadow: 0 6px 24px var(--ombre-naturelle); transition: all 600ms ease-out !important; } .soin-card:hover, .axe-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px var(--ombre-profonde); border-color: var(--foret-profonde-soft) !important; } /* --- Section eyebrow --- */ .section-eyebrow { color: var(--foret-profonde) !important; font-family: 'Manrope', sans-serif !important; letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; font-weight: 500; } /* --- Inputs --- */ input, textarea, select { font-family: 'Manrope', sans-serif !important; border-radius: 14px !important; border-color: rgba(122, 158, 135, 0.24) !important; } input:focus, textarea:focus, select:focus { border-color: var(--foret-profonde) !important; outline: 2px solid rgba(122, 158, 135, 0.18) !important; } /* --- Particules (canvas bg) --- */ #particles-bg { opacity: 0.6 !important; } /* --- Étoiles "gold" → feuilles dorées --- */ .gold-star::before, .testi-stars i { color: var(--lumiere-doree) !important; } /* --- Diviseurs sacrés (✦ → ❋) --- */ .divider svg use[href*="sacred-divider"] { color: var(--lumiere-doree); } /* --- Music toggle bottom-left --- */ .music-toggle-emilie { background: var(--foret-profonde) !important; color: var(--souffle-ivoire) !important; } /* --- Companion FAB (GAÏA) --- */ #companion-fab { background: transparent !important; box-shadow: none !important; border: none !important; } #companion-panel { background: var(--souffle-ivoire) !important; border: 1px solid rgba(122, 158, 135, 0.18) !important; } /* --- Témoignages : carrousel --- */ .testi-card { background: #FFFFFF !important; border: 1px solid rgba(212, 175, 106, 0.18) !important; border-radius: 24px !important; } /* --- Signature manuscrite Sylvie --- */ .testi-handwritten .testi-quote { font-family: 'Caveat', cursive !important; font-size: 1.4em !important; line-height: 1.5 !important; color: var(--texte-principal); } /* --- Section "Écrits du vivant" --- */ .ecrits-section { background: linear-gradient(180deg, var(--souffle-ivoire) 0%, #ECE3D2 100%); padding: 100px 0; } .ecrit-card { background: #FFFFFF; border: 1px solid rgba(139, 123, 160, 0.16); border-radius: 22px; padding: 32px 26px; box-shadow: 0 6px 22px var(--ombre-naturelle); transition: all 600ms ease-out; display: flex; flex-direction: column; gap: 14px; height: 100%; } .ecrit-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px var(--ombre-profonde); border-color: var(--ame-violette); } .ecrit-card .ecrit-date { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ame-violette); } .ecrit-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--texte-principal); font-weight: 500; } .ecrit-card .ecrit-extrait { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; color: var(--texte-doux); line-height: 1.7; } .ecrit-card .ecrit-link { margin-top: auto; color: var(--foret-profonde); font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: 0.1em; text-decoration: none; font-weight: 500; } .ecrit-card .ecrit-link:hover { color: var(--terre-sacree); } /* --- Vidéo témoignages : facade pattern --- */ .video-temoin { position: relative; border-radius: 22px; overflow: hidden; background: #000; aspect-ratio: 16/9; cursor: pointer; } .video-temoin img, .video-temoin video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-temoin .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: rgba(245, 240, 232, 0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); transition: all 300ms ease-out; } .video-temoin:hover .video-play { background: var(--foret-profonde); transform: translate(-50%, -50%) scale(1.06); } .video-temoin .video-play::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--foret-profonde); margin-left: 5px; } .video-temoin:hover .video-play::after { border-left-color: var(--souffle-ivoire); } /* --- Audio témoin player --- */ .audio-temoin { background: #FFFFFF; border: 1px solid rgba(122, 158, 135, 0.2); border-radius: 20px; padding: 24px 26px; box-shadow: 0 6px 22px var(--ombre-naturelle); } .audio-temoin audio { width: 100%; margin-top: 12px; } .audio-temoin .audio-temoin-label { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--texte-doux); font-size: 17px; line-height: 1.6; } /* --- Page poésie /ecrits/moi-moi-moi/ --- */ .poesie-page { max-width: 720px; margin: 0 auto; padding: 80px 24px 120px; } .poesie-page h1 { text-align: center; font-size: clamp(34px, 5vw, 52px); margin-bottom: 14px; } .poesie-page .poesie-meta { text-align: center; font-family: 'Manrope', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; color: var(--ame-violette); margin-bottom: 56px; } .poesie-section { margin: 48px 0; } .poesie-section-label { text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--foret-profonde); font-size: 18px; margin-bottom: 18px; letter-spacing: 0.04em; } .poesie-stanza { font-family: 'Cormorant Garamond', serif; font-size: 21px; line-height: 1.85; text-align: center; color: var(--texte-principal); font-weight: 400; } .poesie-ornement { text-align: center; margin: 36px 0; color: var(--lumiere-doree); letter-spacing: 1em; font-size: 14px; } @media (max-width: 768px) { .poesie-stanza { font-size: 18px; } } /* --- Responsive : cartes séances breath --- */ @media (max-width: 768px) { .soin-card, .axe-card { padding: 24px 20px; } }