/* ================================================ HELLO VOYANCE — DESIGN SYSTEM v2.1 Chargé sur TOUTES les pages du site. Dernière mise à jour : Février 2026 ================================================ */ /* ── Google Fonts (backup si non chargé dans ) ── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap'); /* ================================================ 1. LOGO — 65px mobile · 74px desktop (≥1024px) ================================================ */ .site-logo { height: 4.0625rem; /* 65px mobile */ width: auto; object-fit: contain; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; transition: opacity 0.2s ease, transform 0.25s ease; } .site-logo:hover { opacity: 0.88; transform: scale(1.02); } @media (min-width: 768px) and (max-width: 1023px) { .site-logo { height: 5rem; } /* 80px tablette */ } @media (min-width: 1024px) { .site-logo { height: 4.625rem; } /* 74px desktop — dans header 90px */ } /* ================================================ 2. HEADER — Base mobile & tablette ================================================ */ header.nav-shadow > div > div { height: auto !important; min-height: 72px; padding-top: 10px !important; padding-bottom: 10px !important; box-sizing: border-box; } /* Transition douce sur le sticky */ header.nav-shadow, #main-header { transition: box-shadow 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease; } /* ================================================ 2b. HEADER DESKTOP (≥1024px) — Prestige & Layout ================================================ */ @media (min-width: 1024px) { /* ── Dimensions : 90px min, logo confortable ── */ header.nav-shadow > div > div { min-height: 90px; padding-top: 8px !important; padding-bottom: 8px !important; } /* ── Container élargi max-w-7xl (1280px) ── */ header.nav-shadow > div { max-width: 80rem !important; /* 1280px */ } /* ── Glassmorphism toujours actif ── */ header.nav-shadow { background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* ── Ombre fine au scroll (class .scrolled ajoutée par JS) ── */ header.nav-shadow.scrolled { box-shadow: 0 1px 0 rgba(109, 91, 151, 0.08), 0 4px 20px rgba(109, 91, 151, 0.07) !important; } /* ── Layout 3 colonnes : Logo | Nav centré | Boutons ── */ header.nav-shadow > div > div { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; } /* Logo — colonne 1, aligné à gauche */ header.nav-shadow > div > div > a:first-child { grid-column: 1; justify-self: start; } /* Nav — colonne 2, parfaitement centré */ header.nav-shadow > div > div > nav { grid-column: 2; display: flex !important; justify-content: center; gap: 2rem; } /* Boutons CTA — colonne 3, alignés à droite */ header.nav-shadow > div > div > div.hidden { grid-column: 3; justify-self: end; display: flex !important; gap: 0.75rem; align-items: center; } /* Bouton mobile toggle — masqué sur desktop */ header.nav-shadow > div > div > button { display: none !important; } /* ── Navigation links — effet underline animé ── */ header.nav-shadow nav a { position: relative; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9rem; color: #4B5563; text-decoration: none !important; padding-bottom: 4px; letter-spacing: 0.01em; transition: color 0.22s ease; white-space: nowrap; } /* Barre soulignée animée */ header.nav-shadow nav a::after { content: ''; position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px; background: #6D5B97; transform: translateX(-50%); transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; } header.nav-shadow nav a:hover, header.nav-shadow nav a.active { color: #6D5B97 !important; } header.nav-shadow nav a:hover::after, header.nav-shadow nav a.active::after { width: 100%; } /* ── Boutons nav header — compacts mais percutants ── */ header.nav-shadow .btn-touch-prive.btn-sm, header.nav-shadow .btn-touch-audiotel.btn-sm { padding: 8px 18px; border-radius: 12px; gap: 1px; min-width: 130px; } header.nav-shadow .btn-touch-prive.btn-sm .btn-number { font-size: 1rem; } header.nav-shadow .btn-touch-audiotel.btn-sm .btn-number{ font-size: 0.9rem; } header.nav-shadow .btn-touch-prive.btn-sm .btn-label, header.nav-shadow .btn-touch-audiotel.btn-sm .btn-label { font-size: 0.57rem; letter-spacing: 0.14em; } } /* ================================================ 3. TOUCH & CALL BUTTONS — Format Vertical Prestige ================================================ */ /* ── Bouton Privé (Or Rose) — PRIORITÉ 1 ── */ .btn-touch-prive { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; background: linear-gradient(135deg, #E29587 0%, #d48474 100%); color: #fff; border-radius: 20px; padding: 16px 38px; gap: 3px; /* Relief "cliquable" renforcé */ box-shadow: 0 10px 25px -5px rgba(226, 149, 135, 0.40), 0 4px 10px -2px rgba(226, 149, 135, 0.30), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; animation: pulseSoftRose 3.5s ease-in-out infinite; position: relative; overflow: hidden; cursor: pointer; min-width: 200px; } /* Reflet lumineux glissant au hover */ .btn-touch-prive::before { content: ''; position: absolute; top: -50%; left: -65%; width: 40%; height: 200%; background: rgba(255,255,255,0.20); transform: skewX(-20deg); transition: left 0.5s ease; pointer-events: none; } .btn-touch-prive:hover::before { left: 115%; } .btn-touch-prive:hover { transform: translateY(-5px) scale(1.04); box-shadow: 0 18px 45px -8px rgba(226, 149, 135, 0.55), 0 8px 16px -4px rgba(226, 149, 135, 0.35), inset 0 1px 0 rgba(255,255,255,0.25); animation: none; } /* Typographies internes Privé */ .btn-touch-prive .btn-label { font-size: 0.62rem; /* réduit pour laisser respirer le numéro */ font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.90; line-height: 1; } .btn-touch-prive .btn-number { font-family: 'Playfair Display', Georgia, serif; font-size: 1.55rem; font-weight: 800; /* Extra-Bold — élément le plus visible */ line-height: 1.15; letter-spacing: -0.01em; } .btn-touch-prive .btn-badge { display: inline-block; background: rgba(255,255,255,0.32); border-radius: 20px; padding: 2px 12px; font-size: 0.60rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; } /* Variante compacte (nav header) */ .btn-touch-prive.btn-sm { padding: 10px 20px; border-radius: 14px; gap: 2px; min-width: 0; } .btn-touch-prive.btn-sm .btn-number { font-size: 1.05rem; font-weight: 800; } .btn-touch-prive.btn-sm .btn-label { font-size: 0.58rem; } /* ── Bouton Audiotel (Améthyste) — PRIORITÉ 2 ── */ .btn-touch-audiotel { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; background: linear-gradient(135deg, #6D5B97 0%, #5a4a7d 100%); color: #fff; border-radius: 20px; padding: 16px 38px; gap: 3px; box-shadow: 0 6px 20px -4px rgba(109,91,151,0.38), inset 0 1px 0 rgba(255,255,255,0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; min-width: 200px; } .btn-touch-audiotel:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 36px -6px rgba(109,91,151,0.52), inset 0 1px 0 rgba(255,255,255,0.18); } /* Typographies internes Audiotel */ .btn-touch-audiotel .btn-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.88; line-height: 1; } .btn-touch-audiotel .btn-number { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 800; /* Extra-Bold aussi pour le secondaire */ line-height: 1.15; } .btn-touch-audiotel .btn-sublabel { font-size: 0.60rem; opacity: 0.80; line-height: 1; margin-top: 2px; } /* Variante compacte (nav header) */ .btn-touch-audiotel.btn-sm { padding: 10px 20px; border-radius: 14px; gap: 2px; min-width: 0; } .btn-touch-audiotel.btn-sm .btn-number { font-size: 0.95rem; font-weight: 800; } .btn-touch-audiotel.btn-sm .btn-label { font-size: 0.58rem; } /* ================================================ 4. ANIMATIONS — Pulse & Shimmer ================================================ */ @keyframes pulseSoftRose { 0%, 100% { box-shadow: 0 10px 25px -5px rgba(226, 149, 135, 0.40), 0 4px 10px -2px rgba(226, 149, 135, 0.30), inset 0 1px 0 rgba(255,255,255,0.25); } 50% { box-shadow: 0 12px 30px -4px rgba(226, 149, 135, 0.65), 0 0 0 7px rgba(226, 149, 135, 0.10), inset 0 1px 0 rgba(255,255,255,0.25); } } /* Extension de pulse aux anciens boutons .btn-prive (rétrocompat.) */ .btn-prive { animation: pulseSoftRose 3.5s ease-in-out infinite !important; } .btn-prive:hover { animation: none !important; } /* ================================================ 5. HERO — Texture étoilée & profondeur ================================================ */ .hero-bg { position: relative; overflow: hidden; } /* Motif étoilé subtil via SVG inline en background */ .hero-bg::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1.2' fill='rgba(109%2C91%2C151%2C0.10)'/%3E%3Ccircle cx='8' cy='8' r='0.8' fill='rgba(226%2C149%2C135%2C0.09)'/%3E%3Ccircle cx='72' cy='8' r='0.8' fill='rgba(226%2C149%2C135%2C0.09)'/%3E%3Ccircle cx='8' cy='72' r='0.8' fill='rgba(109%2C91%2C151%2C0.07)'/%3E%3Ccircle cx='72' cy='72' r='0.8' fill='rgba(109%2C91%2C151%2C0.07)'/%3E%3Ccircle cx='40' cy='8' r='0.6' fill='rgba(155%2C140%2C196%2C0.10)'/%3E%3Ccircle cx='40' cy='72' r='0.6' fill='rgba(155%2C140%2C196%2C0.08)'/%3E%3Ccircle cx='8' cy='40' r='0.6' fill='rgba(226%2C149%2C135%2C0.07)'/%3E%3Ccircle cx='72' cy='40' r='0.6' fill='rgba(226%2C149%2C135%2C0.07)'/%3E%3C/svg%3E"); background-size: 80px 80px; pointer-events: none; z-index: 0; } /* S'assure que le contenu du hero passe au-dessus de la texture */ .hero-bg > * { position: relative; z-index: 1; } /* Profondeur subtile sur les H1 du hero (sans casser les colorés) */ .hero-bg h1 { filter: drop-shadow(0 2px 5px rgba(45, 27, 85, 0.10)); } /* ================================================ 6. TITRES — Dégradé de profondeur améthyste ================================================ */ /* Appliqué sur les H2 de section (class="section-title") */ .section-title { background: linear-gradient(135deg, #6D5B97 0%, #2D1B55 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ================================================ 7. CARD HOVER — scale(1.02) sur toutes les cartes ================================================ */ .track-card, .tip-card, .article-card, .related-card, .step-card, .sidebar-card, .theme-card, .legal-card { transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .track-card:hover { transform: translateY(-6px) scale(1.02) !important; } .tip-card:hover { transform: translateY(-5px) scale(1.02) !important; } .article-card:hover { transform: translateY(-5px) scale(1.02) !important; } .step-card:hover { transform: translateY(-4px) scale(1.02) !important; } .sidebar-card:hover { transform: translateY(-4px) scale(1.02) !important; } .theme-card:hover { transform: translateY(-4px) scale(1.03) !important; } .related-card:hover { transform: translateY(-3px) scale(1.01) !important; } /* ================================================ 8. WAVE SEPARATORS ================================================ */ .wave-sep { display: block; width: 100%; line-height: 0; overflow: hidden; margin: 0; padding: 0; } .wave-sep svg { display: block; width: 100%; height: 64px; } @media (max-width: 640px) { .wave-sep svg { height: 38px; } } /* ================================================ 9. HIÉRARCHIE DES NUMÉROS (footer / sections) ================================================ */ .phone-primary { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; font-weight: 800; color: #E29587; line-height: 1.1; display: block; } .phone-primary-badge { display: inline-block; background: #E29587; color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 0.60rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: middle; margin-left: 6px; font-family: 'Inter', sans-serif; } .phone-secondary { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: #9B8CC4; line-height: 1.1; display: block; } /* ================================================ 10. STICKY CTA — Safe area + hauteur confortable ================================================ */ .sticky-cta { /* Remonte de l'inset système (iPhone, Android) */ padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important; } .sticky-cta .btn-touch-prive, .sticky-cta .btn-touch-audiotel { flex: 1; padding: 10px 10px; border-radius: 14px; gap: 2px; min-width: 0; } .sticky-cta .btn-touch-prive .btn-number { font-size: 1.05rem; font-weight: 800; } .sticky-cta .btn-touch-audiotel .btn-number { font-size: 0.95rem; font-weight: 800; } .sticky-cta .btn-touch-prive .btn-label, .sticky-cta .btn-touch-audiotel .btn-label { font-size: 0.56rem; } .sticky-cta .btn-touch-prive .btn-badge { font-size: 0.52rem; padding: 1px 7px; } /* Suppression du min-width dans sticky pour éviter overflow mobile */ .sticky-cta .btn-touch-prive, .sticky-cta .btn-touch-audiotel { min-width: 0 !important; }