/* ============================================================================= Piscinity — Themes couleurs commutables Chaque theme surcharge UNIQUEMENT des tokens de couleur de design-system.css. Active via l'attribut data-piscinity-theme sur (gere par theme-switcher.js). Theme par defaut (aucun attribut) = "Lagon & Or" (palette d'origine). Couleurs sources (logo Piscinity) : corail #F06060, bleu azur #4890D8. Le corail CTA est legerement assombri (#E64A35) pour rester lisible en texte blanc (contraste AA sur grand texte / boutons). ============================================================================= */ /* --- Lagon & Corail : palette actuelle, CTA passe en corail --------------- */ :root[data-piscinity-theme="lagon-corail"] { --color-cta: #E64A35; --color-cta-hover: #CF3D2A; --color-cta-soft: rgba(240, 96, 96, 0.14); --color-text-on-cta: #FFFFFF; --color-cta-glow: #FFC4B5; --color-cta-rgb: 240, 96, 96; } /* --- Azur & Corail (recommande) : couleurs EXACTES du logo officiel ------- Azur #3884C3, bleu clair #62BFEE, corail #FF5757, blanc #FFFFFF. */ :root[data-piscinity-theme="azur-corail"] { --color-ink: #1B4E78; --color-primary: #3884C3; --color-primary-soft: #62BFEE; --color-secondary: #62BFEE; --color-secondary-soft: #D4EEFB; --color-cta: #FF5757; --color-cta-hover: #F23E3E; --color-cta-soft: rgba(255, 87, 87, 0.14); --color-text-on-cta: #FFFFFF; --color-cta-glow: #FFC0C0; --color-cta-rgb: 255, 87, 87; --color-bg-dark: #1B4E78; } /* --- Corail signature : corail dominant + bleu azur secondaire ------------ */ :root[data-piscinity-theme="corail"] { --color-ink: #14333F; --color-primary: #E64A35; --color-primary-soft: #F06060; --color-secondary: #3D8BD0; --color-secondary-soft: #BFDDF4; --color-cta: #D8412C; --color-cta-hover: #BE3522; --color-cta-soft: rgba(240, 96, 96, 0.14); --color-text-on-cta: #FFFFFF; --color-cta-glow: #FFC4B5; --color-cta-rgb: 240, 96, 96; --color-bg-dark: #14333F; } /* Themes corail : texte blanc force sur les boutons/badges a fond corail (le theme or par defaut garde son texte encre). */ :root[data-piscinity-theme="lagon-corail"] .piscinity-btn--cta, :root[data-piscinity-theme="lagon-corail"] .pcat__btn, :root[data-piscinity-theme="lagon-corail"] .pcat__badge--best, :root[data-piscinity-theme="lagon-corail"] .pcat__tab--carbone[aria-pressed="true"], :root[data-piscinity-theme="lagon-corail"] .piscinity-faq__item[open] .piscinity-faq__icon, :root[data-piscinity-theme="azur-corail"] .piscinity-btn--cta, :root[data-piscinity-theme="azur-corail"] .pcat__btn, :root[data-piscinity-theme="azur-corail"] .pcat__badge--best, :root[data-piscinity-theme="azur-corail"] .pcat__tab--carbone[aria-pressed="true"], :root[data-piscinity-theme="azur-corail"] .piscinity-faq__item[open] .piscinity-faq__icon, :root[data-piscinity-theme="corail"] .piscinity-btn--cta, :root[data-piscinity-theme="corail"] .pcat__btn, :root[data-piscinity-theme="corail"] .pcat__badge--best, :root[data-piscinity-theme="corail"] .pcat__tab--carbone[aria-pressed="true"], :root[data-piscinity-theme="corail"] .piscinity-faq__item[open] .piscinity-faq__icon { color: #fff !important; } /* Themes corail : l'accent clair du hero (mot du titre + mots en gras du chapeau) passe du corail pale au bleu clair du logo, plus lisible/net. */ :root[data-piscinity-theme="lagon-corail"] .piscinity-hero__line--em .piscinity-hero__line-inner, :root[data-piscinity-theme="lagon-corail"] .piscinity-hero__lead strong, :root[data-piscinity-theme="azur-corail"] .piscinity-hero__line--em .piscinity-hero__line-inner, :root[data-piscinity-theme="azur-corail"] .piscinity-hero__lead strong, :root[data-piscinity-theme="corail"] .piscinity-hero__line--em .piscinity-hero__line-inner, :root[data-piscinity-theme="corail"] .piscinity-hero__lead strong { color: #62BFEE; } /* ============================================================================= Panneau de choix prive (visible uniquement via ?themes=1) ============================================================================= */ .pisc-theme-tool { position: fixed; left: 16px; bottom: 16px; z-index: 99999; width: 264px; max-width: calc(100vw - 32px); background: #ffffff; color: #0B2E3F; border: 1px solid #E2DDD3; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); font-family: var(--font-body, -apple-system, "Segoe UI", Roboto, sans-serif); padding: 14px 16px; } .pisc-theme-tool__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #4D6470; margin: 0 0 4px; } .pisc-theme-tool__note { font-size: 11px; line-height: 1.4; color: #8a98a0; margin: 0 0 10px; } .pisc-theme-tool__list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; } .pisc-theme-tool__btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer; border: 1px solid #E2DDD3; background: #FBF9F5; border-radius: 9px; padding: 8px 10px; font-size: 13px; line-height: 1.2; color: #0B2E3F; transition: border-color 0.15s ease, background 0.15s ease; } .pisc-theme-tool__btn:hover { border-color: #1F6FB2; } .pisc-theme-tool__btn[aria-pressed="true"] { border-color: #1F6FB2; background: #EAF2FB; font-weight: 600; } .pisc-theme-tool__sw { width: 30px; height: 14px; border-radius: 8px; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, 0.08); } .pisc-theme-tool__close { display: block; width: 100%; border: none; background: none; color: #4D6470; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 2px; } @media (prefers-reduced-motion: reduce) { .pisc-theme-tool__btn { transition: none; } }