/* * PredictVague — Système de thèmes v2 * 4 thèmes surf via data-theme sur * Variables CSS consommées par base.html et les templates */ /* ============================================================ THEME : nuit-atlantique (défaut) Ambiance nuit à Hossegor — bioluminescence, eau noire, cyan pur ============================================================ */ :root, [data-theme="nuit-atlantique"] { color-scheme: dark; --bg-base: #010b18; --bg-primary: #030f20; --bg-secondary: #051428; --bg-card: rgba(0,229,255,0.04); --bg-card-strong: rgba(0,229,255,0.07); --bg-card-hover: rgba(0,229,255,0.08); --border-subtle: rgba(255,255,255,0.07); --border-card: rgba(0,229,255,0.12); --text-primary: #f0faff; --text-secondary: #b8d8e8; --text-muted: #4a7a90; --text-faint: #1a3345; --accent: #00e5ff; --accent-hover: #00ccee; --accent-bg: rgba(0,229,255,0.09); --accent-border: rgba(0,229,255,0.28); --nav-bg: rgba(1,11,24,0.88); --footer-border: rgba(0,229,255,0.06); --scrollbar-track: #020d1c; --scrollbar-thumb: #0a2a40; --wave-radial-1: rgba(0,229,255,0.07); --wave-radial-2: rgba(0,180,220,0.04); --glass-blur: blur(12px); --glass-blur-strong:blur(20px); --gradient-text-from: #00e5ff; --gradient-text-mid: #00ccee; --gradient-text-to: #0099cc; --card-hover-shadow: rgba(0,229,255,0.14); /* RGB de l'accent pour box-shadows dynamiques */ --accent-rgb: 0, 229, 255; /* Dot couleur pour le switcher */ --dot-color: #00e5ff; } /* ============================================================ THEME : aube-marocaine Lever de soleil à Taghazout — ambre chaud, sable, or brûlé ============================================================ */ [data-theme="aube-marocaine"] { color-scheme: dark; --bg-base: #140a04; --bg-primary: #1c0e05; --bg-secondary: #251408; --bg-card: rgba(245,158,11,0.04); --bg-card-strong: rgba(245,158,11,0.08); --bg-card-hover: rgba(245,158,11,0.09); --border-subtle: rgba(255,200,100,0.07); --border-card: rgba(245,158,11,0.14); --text-primary: #fff7ed; --text-secondary: #e8c97e; --text-muted: #8a6030; --text-faint: #3d2810; --accent: #f59e0b; --accent-hover: #d97706; --accent-bg: rgba(245,158,11,0.11); --accent-border: rgba(245,158,11,0.32); --nav-bg: rgba(20,10,4,0.9); --footer-border: rgba(245,158,11,0.08); --scrollbar-track: #140a04; --scrollbar-thumb: #5a3210; --wave-radial-1: rgba(245,158,11,0.08); --wave-radial-2: rgba(251,191,36,0.04); --glass-blur: blur(12px); --glass-blur-strong:blur(20px); --gradient-text-from: #f59e0b; --gradient-text-mid: #fbbf24; --gradient-text-to: #f97316; --card-hover-shadow: rgba(245,158,11,0.17); --accent-rgb: 245, 158, 11; --dot-color: #f59e0b; } /* ============================================================ THEME : brume-bretonne Pointe de la Torche dans la brume — vert mousse, granite, embruns ============================================================ */ [data-theme="brume-bretonne"] { color-scheme: dark; --bg-base: #0a0f0b; --bg-primary: #0d140e; --bg-secondary: #111a12; --bg-card: rgba(74,222,128,0.04); --bg-card-strong: rgba(74,222,128,0.07); --bg-card-hover: rgba(74,222,128,0.08); --border-subtle: rgba(255,255,255,0.07); --border-card: rgba(74,222,128,0.12); --text-primary: #f0fff4; --text-secondary: #a8d8b0; --text-muted: #3d7a4a; --text-faint: #1a3a20; --accent: #4ade80; --accent-hover: #22c55e; --accent-bg: rgba(74,222,128,0.09); --accent-border: rgba(74,222,128,0.28); --nav-bg: rgba(10,15,11,0.9); --footer-border: rgba(74,222,128,0.06); --scrollbar-track: #0a0f0b; --scrollbar-thumb: #1a3a22; --wave-radial-1: rgba(74,222,128,0.07); --wave-radial-2: rgba(34,197,94,0.04); --glass-blur: blur(12px); --glass-blur-strong:blur(20px); --gradient-text-from: #4ade80; --gradient-text-mid: #22c55e; --gradient-text-to: #16a34a; --card-hover-shadow: rgba(74,222,128,0.14); --accent-rgb: 74, 222, 128; --dot-color: #4ade80; } /* ============================================================ THEME : crepuscule-basque Biarritz 18h30 — orange brûlé, violet nuit, silhouette GHP ============================================================ */ [data-theme="crepuscule-basque"] { color-scheme: dark; --bg-base: #08051a; --bg-primary: #0d081f; --bg-secondary: #120c26; --bg-card: rgba(249,115,22,0.04); --bg-card-strong: rgba(249,115,22,0.07); --bg-card-hover: rgba(249,115,22,0.09); --border-subtle: rgba(255,255,255,0.07); --border-card: rgba(249,115,22,0.13); --text-primary: #fff7f0; --text-secondary: #d4b8c8; --text-muted: #7a5060; --text-faint: #2e1a28; --accent: #f97316; --accent-hover: #ea6c0a; --accent-bg: rgba(249,115,22,0.1); --accent-border: rgba(249,115,22,0.3); --nav-bg: rgba(8,5,26,0.9); --footer-border: rgba(249,115,22,0.07); --scrollbar-track: #08051a; --scrollbar-thumb: #2e1045; --wave-radial-1: rgba(249,115,22,0.08); --wave-radial-2: rgba(139,92,246,0.06); --glass-blur: blur(12px); --glass-blur-strong:blur(20px); --gradient-text-from: #f97316; --gradient-text-mid: #fb923c; --gradient-text-to: #a855f7; --card-hover-shadow: rgba(249,115,22,0.16); --accent-rgb: 249, 115, 22; --dot-color: #f97316; } /* ============================================================ STYLES BASÉS SUR LES VARIABLES (partagés par tous les thèmes) ============================================================ */ /* Accessibilité : skip-to-content */ .skip-link { position: absolute; top: -100%; left: 0.5rem; z-index: 9999; padding: 0.5rem 1rem; background: var(--accent); color: #000; font-weight: 700; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } body { background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-primary) 30%, var(--bg-secondary) 60%, var(--bg-base) 100%); background-attachment: fixed; min-height: 100vh; color: var(--text-primary); } /* Typographie : Syne pour les titres */ .font-syne { font-family: 'Syne', 'Inter', system-ui, sans-serif; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Glassmorphism */ .glass { background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); } .glass-strong { background: var(--bg-card-strong); backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); border: 1px solid var(--border-subtle); } /* Wave bg overlay */ .wave-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, var(--wave-radial-1) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, var(--wave-radial-2) 0%, transparent 50%); pointer-events: none; } /* Navbar */ nav { background: var(--nav-bg) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Card hover */ .spot-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .spot-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px var(--card-hover-shadow); } /* Gradient text */ .text-gradient { background: linear-gradient(135deg, var(--gradient-text-from), var(--gradient-text-mid), var(--gradient-text-to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Accent color utilities */ .accent-text { color: var(--accent); } .accent-bg { background: var(--accent-bg); } .accent-border{ border-color: var(--accent-border); } /* Live dot */ .live-dot { animation: livePulse 2s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* Quality badges */ .badge-excellent { background: rgba(0,229,255,0.14); color: #00e5ff; border: 1px solid rgba(0,229,255,0.28); } .badge-good { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); } .badge-medium { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); } .badge-bad { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); } .badge-flat { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); } /* Badge overrides pour thèmes non-cyan */ [data-theme="aube-marocaine"] .badge-excellent, [data-theme="crepuscule-basque"] .badge-excellent { background: rgba(245,158,11,0.13); color: #f59e0b; border-color: rgba(245,158,11,0.3); } [data-theme="brume-bretonne"] .badge-excellent { background: rgba(74,222,128,0.13); color: #4ade80; border-color: rgba(74,222,128,0.3); } /* Score bar — hauteur 3px avec glow */ .score-bar { height: 5px; width: 100%; background: rgba(255,255,255,0.05); } .score-bar-fill { height: 100%; transition: width 1s ease; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); } /* Overrides Tailwind cyan hardcodés — thèmes non-cyan */ /* aube-marocaine */ [data-theme="aube-marocaine"] .text-cyan-400 { color: var(--accent) !important; } [data-theme="aube-marocaine"] .text-cyan-300 { color: #fbbf24 !important; } [data-theme="aube-marocaine"] .text-cyan-500 { color: var(--accent) !important; } [data-theme="aube-marocaine"] .border-cyan-500\/20 { border-color: rgba(245,158,11,0.2) !important; } [data-theme="aube-marocaine"] .bg-cyan-500\/10 { background: rgba(245,158,11,0.1) !important; } [data-theme="aube-marocaine"] .bg-cyan-900\/30 { background: rgba(245,158,11,0.15) !important; } [data-theme="aube-marocaine"] .bg-cyan-400 { background-color: var(--accent) !important; } [data-theme="aube-marocaine"] .hover\:text-cyan-300:hover { color: #fbbf24 !important; } [data-theme="aube-marocaine"] .hover\:border-cyan-500\/40:hover { border-color: rgba(245,158,11,0.4) !important; } [data-theme="aube-marocaine"] .hover\:text-cyan-400:hover { color: var(--accent) !important; } [data-theme="aube-marocaine"] .hover\:bg-cyan-500\/20:hover { background: rgba(245,158,11,0.2) !important; } [data-theme="aube-marocaine"] .group-hover\:text-cyan-300 { color: #fbbf24 !important; } [data-theme="aube-marocaine"] .group-hover\:text-cyan-400 { color: var(--accent) !important; } [data-theme="aube-marocaine"] .text-cyan-500 { color: var(--accent) !important; } /* brume-bretonne */ [data-theme="brume-bretonne"] .text-cyan-400 { color: var(--accent) !important; } [data-theme="brume-bretonne"] .text-cyan-300 { color: #86efac !important; } [data-theme="brume-bretonne"] .text-cyan-500 { color: var(--accent) !important; } [data-theme="brume-bretonne"] .border-cyan-500\/20 { border-color: rgba(74,222,128,0.2) !important; } [data-theme="brume-bretonne"] .bg-cyan-500\/10 { background: rgba(74,222,128,0.1) !important; } [data-theme="brume-bretonne"] .bg-cyan-900\/30 { background: rgba(74,222,128,0.15) !important; } [data-theme="brume-bretonne"] .bg-cyan-400 { background-color: var(--accent) !important; } [data-theme="brume-bretonne"] .hover\:text-cyan-300:hover { color: #86efac !important; } [data-theme="brume-bretonne"] .hover\:border-cyan-500\/40:hover { border-color: rgba(74,222,128,0.4) !important; } [data-theme="brume-bretonne"] .hover\:text-cyan-400:hover { color: var(--accent) !important; } [data-theme="brume-bretonne"] .hover\:bg-cyan-500\/20:hover { background: rgba(74,222,128,0.2) !important; } [data-theme="brume-bretonne"] .group-hover\:text-cyan-300 { color: #86efac !important; } [data-theme="brume-bretonne"] .group-hover\:text-cyan-400 { color: var(--accent) !important; } /* crepuscule-basque */ [data-theme="crepuscule-basque"] .text-cyan-400 { color: var(--accent) !important; } [data-theme="crepuscule-basque"] .text-cyan-300 { color: #fdba74 !important; } [data-theme="crepuscule-basque"] .text-cyan-500 { color: var(--accent) !important; } [data-theme="crepuscule-basque"] .border-cyan-500\/20 { border-color: rgba(249,115,22,0.2) !important; } [data-theme="crepuscule-basque"] .bg-cyan-500\/10 { background: rgba(249,115,22,0.1) !important; } [data-theme="crepuscule-basque"] .bg-cyan-900\/30 { background: rgba(249,115,22,0.15) !important; } [data-theme="crepuscule-basque"] .bg-cyan-400 { background-color: var(--accent) !important; } [data-theme="crepuscule-basque"] .hover\:text-cyan-300:hover { color: #fdba74 !important; } [data-theme="crepuscule-basque"] .hover\:border-cyan-500\/40:hover { border-color: rgba(249,115,22,0.4) !important; } [data-theme="crepuscule-basque"] .hover\:text-cyan-400:hover { color: var(--accent) !important; } [data-theme="crepuscule-basque"] .hover\:bg-cyan-500\/20:hover { background: rgba(249,115,22,0.2) !important; } [data-theme="crepuscule-basque"] .group-hover\:text-cyan-300 { color: #fdba74 !important; } [data-theme="crepuscule-basque"] .group-hover\:text-cyan-400 { color: var(--accent) !important; } /* Chart container */ .chart-container { position: relative; } /* Compass */ .compass-needle { transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .quality-ring svg circle { transition: stroke-dashoffset 1s ease-in-out; } /* Forecast day cards */ .forecast-day-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .forecast-day-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--card-hover-shadow); } /* Text gradient gold */ .text-gradient-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Theme switcher — cercles colorés */ .theme-dot { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; background-clip: padding-box; transition: transform 0.2s ease, border-color 0.15s ease, box-shadow 0.2s ease; touch-action: manipulation; flex-shrink: 0; } .theme-dot:hover { transform: scale(1.2); } .theme-dot.active { border-color: rgba(255,255,255,0.75); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(255,255,255,0.2); } .theme-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 50%; } /* Leaflet overrides */ .leaflet-container { font-family: inherit; } .leaflet-popup-content-wrapper { background: var(--bg-card-strong) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; color: var(--text-primary) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } .leaflet-popup-tip { background: var(--bg-card-strong) !important; } .leaflet-popup-content { margin: 12px 16px !important; } /* Tile filter pour les thèmes sombres */ [data-theme="nuit-atlantique"] .leaflet-tile-pane, [data-theme="aube-marocaine"] .leaflet-tile-pane, [data-theme="brume-bretonne"] .leaflet-tile-pane, [data-theme="crepuscule-basque"] .leaflet-tile-pane { filter: brightness(0.82) saturate(0.85); } /* Prefers-reduced-motion : désactiver toutes les animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .spot-card:hover { transform: none; } } /* ============================================================ THEME : aube-marocaine — ÉDITORIAL / JOURNAL DE BORD Playfair Display + Lora · bords serrés · cards papier mat ============================================================ */ /* Corps : Lora serif */ [data-theme="aube-marocaine"] body { font-family: 'Lora', Georgia, serif; } /* Titres : Playfair Display */ [data-theme="aube-marocaine"] .font-syne, [data-theme="aube-marocaine"] h1, [data-theme="aube-marocaine"] h2, [data-theme="aube-marocaine"] h3 { font-family: 'Playfair Display', Georgia, serif !important; letter-spacing: -0.02em; } /* Formes : rectangulaires, éditorial */ [data-theme="aube-marocaine"] .glass, [data-theme="aube-marocaine"] .glass-strong { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-card-strong) !important; border: 1px solid var(--border-card) !important; border-radius: 8px !important; } [data-theme="aube-marocaine"] .spot-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-card-strong) !important; border-radius: 8px !important; border-top: 2px solid var(--accent-border) !important; } [data-theme="aube-marocaine"] .rounded-3xl { border-radius: 10px !important; } [data-theme="aube-marocaine"] .rounded-2xl { border-radius: 8px !important; } [data-theme="aube-marocaine"] .rounded-xl { border-radius: 6px !important; } [data-theme="aube-marocaine"] .rounded-lg { border-radius: 4px !important; } [data-theme="aube-marocaine"] .rounded-full { border-radius: 4px !important; } /* Nav : fond mat */ [data-theme="aube-marocaine"] nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-primary) !important; } /* Texte gradient : Playfair italic */ [data-theme="aube-marocaine"] .text-gradient { font-style: italic; } /* Titres h1 : plus dramatiques */ [data-theme="aube-marocaine"] h1 { font-style: italic; line-height: 1.1 !important; } /* Grands chiffres des cards */ [data-theme="aube-marocaine"] .text-5xl, [data-theme="aube-marocaine"] .text-4xl, [data-theme="aube-marocaine"] .text-7xl { font-family: 'Playfair Display', Georgia, serif !important; font-style: italic; } /* Badges : coins légèrement arrondis au lieu de pill */ [data-theme="aube-marocaine"] .rounded-full.text-xs, [data-theme="aube-marocaine"] span.rounded-full { border-radius: 3px !important; } /* Card hover : glissement horizontal subtil au lieu de vertical */ [data-theme="aube-marocaine"] .spot-card:hover { transform: translateY(-2px) translateX(2px); border-top-color: var(--accent) !important; } /* Separateurs fins */ [data-theme="aube-marocaine"] .border-t { border-top-width: 1px; border-top-color: var(--border-subtle); } /* ============================================================ THEME : brume-bretonne — TERMINAL / STATION MÉTÉO IBM Plex Mono partout · angles droits · dense · data-first ============================================================ */ /* Corps ET titres : monospace */ [data-theme="brume-bretonne"] body { font-family: 'IBM Plex Mono', 'Courier New', monospace; } [data-theme="brume-bretonne"] .font-syne, [data-theme="brume-bretonne"] h1, [data-theme="brume-bretonne"] h2, [data-theme="brume-bretonne"] h3 { font-family: 'IBM Plex Mono', monospace !important; text-transform: uppercase; letter-spacing: 0.04em; font-style: normal; } /* Formes : angles droits partout, pas de blur */ [data-theme="brume-bretonne"] .glass, [data-theme="brume-bretonne"] .glass-strong, [data-theme="brume-bretonne"] .spot-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-card-strong) !important; border-radius: 0 !important; border: 1.5px solid var(--border-card) !important; } [data-theme="brume-bretonne"] .rounded-3xl, [data-theme="brume-bretonne"] .rounded-2xl, [data-theme="brume-bretonne"] .rounded-xl, [data-theme="brume-bretonne"] .rounded-lg, [data-theme="brume-bretonne"] .rounded-full, [data-theme="brume-bretonne"] .rounded { border-radius: 0 !important; } /* Nav : fond opaque, style terminal */ [data-theme="brume-bretonne"] nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-base) !important; border-bottom: 1.5px solid var(--accent-border) !important; } /* Logo : monospace uppercase */ [data-theme="brume-bretonne"] .font-syne { text-transform: uppercase; letter-spacing: 0.06em; font-style: normal; } /* Titres : uppercase + accent avant le texte (style terminal prompt) */ [data-theme="brume-bretonne"] h1::before { content: '> '; color: var(--accent); font-weight: 700; } /* Hover card : glow border plutôt que translateY */ [data-theme="brume-bretonne"] .spot-card:hover { transform: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), inset 0 0 20px rgba(var(--accent-rgb), 0.04) !important; } /* Grands chiffres : monospace avec glow terminal */ [data-theme="brume-bretonne"] .text-5xl { font-family: 'IBM Plex Mono', monospace !important; font-weight: 700; letter-spacing: -0.02em; } /* Labels : uppercase systématique */ [data-theme="brume-bretonne"] .text-xs, [data-theme="brume-bretonne"] .text-\[10px\] { text-transform: uppercase; letter-spacing: 0.06em; } /* Badges : style étiquette terminal */ [data-theme="brume-bretonne"] .badge-excellent, [data-theme="brume-bretonne"] .badge-good, [data-theme="brume-bretonne"] .badge-medium, [data-theme="brume-bretonne"] .badge-bad, [data-theme="brume-bretonne"] .badge-flat { border-radius: 0 !important; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; font-size: 10px; } /* Cursor crosshair sur les zones de données */ [data-theme="brume-bretonne"] .spot-card { cursor: crosshair; } /* Live dot : clignotement binaire au lieu de pulse */ [data-theme="brume-bretonne"] .live-dot { animation: termBlink 1s step-end infinite; border-radius: 0 !important; width: 8px !important; height: 8px !important; } @keyframes termBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Gradient text : flat color en terminal */ [data-theme="brume-bretonne"] .text-gradient { background: none !important; -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; } /* ============================================================ THEME : crepuscule-basque — CINÉMA / COUCHER DE SOLEIL Cormorant Garamond italic + Outfit · arrondi max · aéré ============================================================ */ /* Corps : Outfit */ [data-theme="crepuscule-basque"] body { font-family: 'Outfit', 'Inter', sans-serif; } /* Titres : Cormorant Garamond italic */ [data-theme="crepuscule-basque"] .font-syne, [data-theme="crepuscule-basque"] h1, [data-theme="crepuscule-basque"] h2, [data-theme="crepuscule-basque"] h3 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-style: italic; font-weight: 700; letter-spacing: 0.01em; } /* Formes : hyper-arrondies, pill */ [data-theme="crepuscule-basque"] .glass { border-radius: 24px !important; } [data-theme="crepuscule-basque"] .glass-strong { border-radius: 28px !important; } [data-theme="crepuscule-basque"] .spot-card { border-radius: 28px !important; } [data-theme="crepuscule-basque"] .rounded-3xl { border-radius: 32px !important; } [data-theme="crepuscule-basque"] .rounded-2xl { border-radius: 24px !important; } [data-theme="crepuscule-basque"] .rounded-xl { border-radius: 20px !important; } [data-theme="crepuscule-basque"] .rounded-lg { border-radius: 16px !important; } /* Titres h1 : taille amplifiée + italic */ [data-theme="crepuscule-basque"] h1 { font-size: clamp(2.8rem, 7vw, 5rem) !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; } /* Grands chiffres des cards : glow warm + Cormorant */ [data-theme="crepuscule-basque"] .text-5xl { font-family: 'Cormorant Garamond', Georgia, serif !important; font-style: italic; font-size: 3.5rem !important; line-height: 1 !important; text-shadow: 0 0 28px rgba(var(--accent-rgb), 0.55), 0 0 60px rgba(var(--accent-rgb), 0.2); } [data-theme="crepuscule-basque"] .text-4xl, [data-theme="crepuscule-basque"] .text-7xl { font-family: 'Cormorant Garamond', Georgia, serif !important; font-style: italic; } /* Cards : plus aérées */ [data-theme="crepuscule-basque"] .spot-card .p-5 { padding: 1.5rem !important; } /* Hover card : scale subtil + glow diffus */ [data-theme="crepuscule-basque"] .spot-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 32px 80px rgba(var(--accent-rgb), 0.18), 0 8px 32px rgba(var(--accent-rgb), 0.1); } /* Nav : pill arrondi pour les boutons */ [data-theme="crepuscule-basque"] nav a, [data-theme="crepuscule-basque"] nav .px-3 { border-radius: 999px !important; } /* Gradient text : plus cinématique */ [data-theme="crepuscule-basque"] .text-gradient { font-style: italic; font-family: 'Cormorant Garamond', Georgia, serif !important; } /* Texte secondaire : Outfit plus léger */ [data-theme="crepuscule-basque"] .text-slate-400, [data-theme="crepuscule-basque"] .text-slate-500 { font-weight: 300; letter-spacing: 0.01em; } /* Badges : pill avec plus de padding */ [data-theme="crepuscule-basque"] .badge-excellent, [data-theme="crepuscule-basque"] .badge-good, [data-theme="crepuscule-basque"] .badge-medium, [data-theme="crepuscule-basque"] .badge-bad, [data-theme="crepuscule-basque"] .badge-flat { padding: 3px 12px !important; font-family: 'Outfit', sans-serif; font-weight: 500; letter-spacing: 0.02em; } /* Live dot : pulse plus lent et plus large */ [data-theme="crepuscule-basque"] .live-dot { animation: crepPulse 3s ease-in-out infinite; width: 8px !important; height: 8px !important; } @keyframes crepPulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4); } 50% { opacity: 0.8; transform: scale(1.4); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); } }