/* ============================================================================ La Fosca Bay — Mode sombre + bouton bascule clair/sombre Activé par la classe `lfb-dark` sur . Palette « Nuit Méditerranée » : bleu-nuit profond, texte ivoire, accents azur / cuivre / or. Contraste élevé (texte ~14:1) + côté classe. ============================================================================ */ /* ---------- Bouton bascule (présent dans les 2 modes) ---------- */ .lfb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid currentColor; color: var(--c-ink); cursor: pointer; padding: 0; flex: 0 0 auto; opacity: .85; transition: opacity .2s ease, background-color .2s ease, color .2s ease; } .lfb-theme-toggle:hover { opacity: 1; background: rgba(127,127,127,.12); } .lfb-theme-toggle svg { width: 19px; height: 19px; fill: currentColor; display: block; } .lfb-theme-toggle .lfb-ico-sun { display: none; } /* Sur le hero d'accueil (header transparent) : icône blanche pour rester lisible */ .home .lfb-header:not(.lfb-scrolled) .lfb-theme-toggle { color: #fff; } html.lfb-dark .lfb-theme-toggle .lfb-ico-moon { display: none; } html.lfb-dark .lfb-theme-toggle .lfb-ico-sun { display: block; } /* ============================ MODE SOMBRE ============================ */ html.lfb-dark { /* On ré-affecte les tokens neutres (couvre la majorité des surfaces/textes) */ --c-bg: #0F1A21; /* fond nuit (teal-navy profond) */ --c-white: #18272F; /* surfaces : cartes, header, dropdown… */ --c-ink: #E8EEF2; /* texte ivoire */ --c-sand: #2C3A43; /* bordures / séparateurs */ --c-sand-deep: #3C4C56; /* --c-primary servait aussi de couleur de TEXTE/titres (bleu profond, illisible sur fond sombre) → on le passe en azur clair. Reste lisible aussi en fond de pastille. */ --c-primary: #8FC1D4; /* --c-cta (cuivre) conservé ; on ajoute : */ --lfb-surface-2: #1F2F39; /* surface surélevée (champs, hover) */ --lfb-border: rgba(255,255,255,.10); --lfb-muted: #A7B8C2; --lfb-gold: #D9B779; /* touche or (rappel logo) */ color-scheme: dark; } /* Fond de page + texte de base */ html.lfb-dark body { background-color: var(--c-bg); color: var(--c-ink); } html.lfb-dark .site-content, html.lfb-dark #content, html.lfb-dark .elementor, html.lfb-dark .elementor-section, html.lfb-dark .e-con { background-color: transparent; } html.lfb-dark h1, html.lfb-dark h2, html.lfb-dark h3, html.lfb-dark h4, html.lfb-dark h5, html.lfb-dark h6, html.lfb-dark .elementor-heading-title { color: var(--c-ink); } /* Liens clairs (azur) */ html.lfb-dark a { color: var(--c-azur); } html.lfb-dark a:hover { color: var(--lfb-gold); } /* ---------- Surfaces claires (var(--c-white) ET #fff littéral) → sombres ---------- */ html.lfb-dark .lfb-header, html.lfb-dark .home .lfb-header.lfb-scrolled, html.lfb-dark .lfb-nav .jet-nav__sub, html.lfb-dark .lfb-card, html.lfb-dark .lfb-avis-card, html.lfb-dark .lfb-poi-card, html.lfb-dark .lfb-guide-card, html.lfb-dark .lfb-guide-rel, html.lfb-dark .lfb-guide-rel__card, html.lfb-dark .home .lfb-why-card, html.lfb-dark .home .lfb-whyc, html.lfb-dark .lfb-res-logement, html.lfb-dark .lfb-res-booking, html.lfb-dark .lfb-res-help, html.lfb-dark .single-logement .lfb-fact, html.lfb-dark .single-logement .lfb-head-aside, html.lfb-dark .single-logement .lfb-beds .jet-listing-dynamic-repeater__item { background: var(--c-white); border-color: var(--lfb-border); color: var(--c-ink); } /* ---------- Boutons à fond clair : garder un texte sombre (sinon invisible) ---------- */ html.lfb-dark .lfb-v4-btn-white .elementor-button { color: var(--c-primary) !important; } /* ---------- Sections "playful" gardées en CLAIR (cohérentes, pas de demi-teinte) ---------- On rétablit les tokens clairs dans leur sous-arbre → elles s'affichent comme en mode clair : une carte claire posée sur le fond sombre (ex. la grille de tarifs colorée). */ html.lfb-dark .lfb-tarifs, html.lfb-dark .lfb-tarifs-card, html.lfb-dark .lfb-tar-cta, html.lfb-dark .lfb-tg, html.lfb-dark .lfb-tg-grid, html.lfb-dark .lfb-tg-card { --c-bg: #FAF7F1; --c-white: #FFFFFF; --c-ink: #23303A; --c-sand: #E3D5BE; --c-sand-deep: #C9B492; color: #23303A; } /* Champs de formulaire */ html.lfb-dark input:not([type="submit"]):not([type="button"]), html.lfb-dark textarea, html.lfb-dark select, html.lfb-dark .lfb-langswitch select { background: var(--lfb-surface-2) !important; color: var(--c-ink) !important; border-color: var(--lfb-border) !important; } html.lfb-dark ::placeholder { color: var(--lfb-muted); opacity: 1; } /* ---------- Exception : --c-ink servait aussi de FOND sombre (rester sombre) ---------- */ html.lfb-dark .lfb-footer { background-color: #0A1218; } /* ---------- Exception : texte blanc à conserver sur fonds colorés (boutons/pills) ---------- */ html.lfb-dark .lfb-btn-cta, html.lfb-dark .lfb-btn-reserver .elementor-button, html.lfb-dark .lfb-v4-btn-ctafill .elementor-button { color: #fff !important; } /* Pastilles azur (catégories/nav guides) : texte sombre pour le contraste */ html.lfb-dark a.lfb-guide-cat:hover, html.lfb-dark .lfb-guide-nav__item.is-active { color: #15222B !important; } /* ---------- Header sombre : logo clair + bordure fine ---------- */ html.lfb-dark .lfb-header { border-bottom: 1px solid var(--lfb-border); box-shadow: none; } html.lfb-dark .lfb-logo-text .elementor-heading-title, html.lfb-dark .lfb-logo-text .elementor-heading-title a { color: var(--c-ink) !important; } /* Menu : liens ivoire, hover azur */ html.lfb-dark .lfb-header .lfb-nav .menu-item-link { color: var(--c-ink); } html.lfb-dark .lfb-header .lfb-nav .menu-item-link:hover, html.lfb-dark .lfb-header .lfb-nav .current-menu-item > a { color: var(--c-azur); } /* Accueil transparent : on garde le blanc sur la photo (ne pas forcer en ivoire) */ html.lfb-dark .home .lfb-header:not(.lfb-scrolled) .lfb-logo-text .elementor-heading-title a, html.lfb-dark .home .lfb-header:not(.lfb-scrolled) .lfb-nav .menu-item-link { color: #fff !important; } /* ---------- Dropdown (Logements / Découvrir) ---------- */ html.lfb-dark .lfb-nav .jet-nav__sub { border-color: var(--lfb-border); box-shadow: 0 14px 34px rgba(0,0,0,.5); } html.lfb-dark .lfb-header .lfb-nav .jet-nav__sub .menu-item-link { color: var(--c-ink) !important; } html.lfb-dark .lfb-header .lfb-nav .jet-nav__sub .menu-item-link:hover { background: var(--lfb-surface-2); color: var(--c-azur) !important; } /* Bandeaux d'en-tête clairs des pages intérieures (dégradés crème→blanc) → transparents en sombre (laissent voir le fond nuit), sinon ils forment une bande claire sous le header. */ html.lfb-dark .lfb-tar-hero, html.lfb-dark .lfb-tar-hero-pref { background-image: none !important; background-color: transparent !important; } /* Textes « muted » (gris foncés codés en dur) → gris clair lisible en sombre */ html.lfb-dark .lfb-v4-intro-text p, html.lfb-dark .lfb-v4-cta-text p, html.lfb-dark .lfb-mapcard__slogan { color: var(--lfb-muted) !important; } /* Filets / séparateurs sable */ html.lfb-dark .lfb-v4-rule { background: var(--c-sand-deep); } html.lfb-dark hr { border-color: var(--lfb-border); } /* Bordures génériques de cartes (au cas où une couleur sable subsiste) */ html.lfb-dark [style*="border"][class*="lfb-"] { border-color: var(--lfb-border); }