/* ============================================ Yann.Art - Light Mode Overrides du design dark par défaut quand est posé côté PHP. Stratégie : réécrire les variables CSS racines (la plupart des composants s'adaptent seuls) + quelques overrides ciblés pour les valeurs hardcodées (header, overlays hero). L'accent turquoise reste identique dans les deux modes. ============================================ */ /* ============================================ 1. TOKENS - overrides en light mode ============================================ */ :root[data-theme="light"] { /* Backgrounds : clair, neutre, un poil plus gris pour sections alt */ --ya-bg-primary: #FFFFFF; --ya-bg-alt: #F1F5F9; --ya-bg-dark: #E2E8F0; /* Text : on inverse */ --ya-text-primary: #1D252D; --ya-text-secondary: #4A5568; --ya-text-muted: #64748B; /* --ya-text-dark reste #1D252D : utilisé sur fond accent (bouton primaire) */ /* Borders : plus claires */ --ya-border: #E2E8F0; --ya-border-light: #CBD5E1; /* Shadows : plus légères sur fond clair */ --ya-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --ya-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --ya-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --ya-shadow-accent: 0 4px 16px rgba(11, 207, 224, 0.25); } /* ============================================ 2. HEADER - fond blanc translucide + bords doux ============================================ */ :root[data-theme="light"] .ya-header { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--ya-border); } /* ============================================ 3. HERO - overlays et titres adaptés ============================================ */ /* Le dégradé mobile qui fond l'image vers le fond devient blanc */ :root[data-theme="light"] .ya-hero-overlay { background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.85) 95%, var(--ya-bg-primary) 100% ); } @media (min-width: 768px) { :root[data-theme="light"] .ya-hero-overlay { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.15) 100% ); } } /* Le text-shadow dark sur le titre devient très léger sur fond clair */ :root[data-theme="light"] .ya-hero-title { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); } /* La flèche scroll du hero doit rester visible sur fond clair */ :root[data-theme="light"] .ya-hero-scroll { color: var(--ya-text-primary); } /* ============================================ 4. GALLERY & WINDOWS - teintes d'overlay ============================================ */ /* Le voile hover sur les vignettes galerie passe plus sombre (les photos sont colorées, le voile neutre reste efficace) */ :root[data-theme="light"] .ya-gallery-item::after { background: rgba(0, 0, 0, 0); } :root[data-theme="light"] .ya-gallery-item:hover::after { background: rgba(0, 0, 0, 0.15); } /* Les 3 fenêtres home : on garde un dégradé sombre-vers-haut pour que "Portrait / Paysages / Expositions" (blanc) reste lisible par-dessus la photo, peu importe le thème */ /* ============================================ 4.1 BOUTONS OUTLINE - contraste sur fond clair -------------------------------------------- En dark mode : text turquoise sur fond sombre = excellent contraste. En light mode : turquoise #0BCFE0 sur blanc ≈ 2:1 (illisible). Solution : texte passe en --ya-text-dark (sombre), la border reste accent pour conserver l'identité turquoise. ============================================ */ :root[data-theme="light"] .ya-btn-outline { color: var(--ya-text-dark); border-color: var(--ya-accent-500); } :root[data-theme="light"] .ya-btn-outline:hover { background: var(--ya-accent-500); color: var(--ya-text-dark); border-color: var(--ya-accent-500); } /* ============================================ 5. FORMS - contrôles sur fond clair ============================================ */ :root[data-theme="light"] .ya-form-control { background: var(--ya-white); border-color: var(--ya-border-light); } :root[data-theme="light"] select.ya-form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } /* ============================================ 6. FOOTER SOCIAL - pastilles adaptées ============================================ */ :root[data-theme="light"] .ya-footer-social a { background: var(--ya-bg-dark); } /* ============================================ 7. COOKIE OVERLAY MOBILE ============================================ */ /* Le voile gris clair suffit sur fond blanc */ @media (max-width: 767px) { :root[data-theme="light"] .ya-cookie-overlay { background: rgba(29, 37, 45, 0.4); } } /* ============================================ 8. TRANSITIONS - changement de thème doux ============================================ */ html[data-theme] body, html[data-theme] .ya-header, html[data-theme] .ya-footer, html[data-theme] .ya-card, html[data-theme] .ya-form-control, html[data-theme] .ya-cookie-banner, html[data-theme] .ya-cookie-settings-panel { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ============================================ 9. LOGO - swap noir/blanc selon le thème ============================================ */ .ya-logo-img-dark, .ya-footer-logo-dark { display: none; } :root[data-theme="light"] .ya-logo-img-light, :root[data-theme="light"] .ya-footer-logo-light { display: none; } :root[data-theme="light"] .ya-logo-img-dark, :root[data-theme="light"] .ya-footer-logo-dark { display: inline-block; } /* ============================================ 10. THEME TOGGLE - bouton soleil/lune ============================================ */ .ya-theme-toggle { appearance: none; background: transparent; border: 1px solid transparent; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ya-text-secondary); transition: background var(--ya-transition), border-color var(--ya-transition), color var(--ya-transition); flex-shrink: 0; } .ya-theme-toggle:hover { color: var(--ya-text-primary); background: rgba(255, 255, 255, 0.08); border-color: var(--ya-border); } :root[data-theme="light"] .ya-theme-toggle:hover { background: rgba(0, 0, 0, 0.05); border-color: var(--ya-border-light); } .ya-theme-toggle:focus-visible { outline: 2px solid var(--ya-accent-500); outline-offset: 2px; } /* Swap des icônes soleil/lune selon le thème actif */ .ya-theme-toggle-sun { display: none; } .ya-theme-toggle-moon { display: block; } :root[data-theme="light"] .ya-theme-toggle-sun { display: block; } :root[data-theme="light"] .ya-theme-toggle-moon { display: none; } /* Placement du toggle dans la nav desktop - on pousse le groupe nav+toggle à droite pour conserver l'alignement d'origine (logo à gauche, nav+toggle à droite) */ @media (min-width: 768px) { .ya-header-inner > nav { margin-left: auto; } } .ya-header-inner .ya-theme-toggle { margin-left: var(--ya-space-md); } /* Masquer le toggle desktop sur petit écran (le menu mobile a le sien) */ @media (max-width: 767px) { .ya-header-inner .ya-theme-toggle { display: none; } } /* ============================================ TOGGLE MOBILE "LABELED" - dans le menu hamburger --------------------------------------------- Version étoffée du toggle pour le menu mobile : icône + label textuel dynamique ("Mode clair" en dark mode, "Mode sombre" en light mode). Le bouton est visuellement stylé comme un lien de nav mobile pour une cohérence avec les autres items du menu et améliorer la découvrabilité du toggle. ============================================ */ .ya-theme-toggle-label { display: none; font-family: var(--ya-font-titles); font-size: var(--ya-text-lg); font-weight: 500; } /* Sur le toggle --labeled : on affiche le label du thème VERS LEQUEL on bascule */ .ya-theme-toggle--labeled .ya-theme-toggle-label-light { display: inline; } /* dark actif → click va vers light → "Mode clair" */ .ya-theme-toggle--labeled .ya-theme-toggle-label-dark { display: none; } :root[data-theme="light"] .ya-theme-toggle--labeled .ya-theme-toggle-label-light { display: none; } :root[data-theme="light"] .ya-theme-toggle--labeled .ya-theme-toggle-label-dark { display: inline; } /* Styling : le toggle --labeled devient une ligne du menu mobile. Width auto, pas de border-radius, séparateur bottom cohérent avec .ya-nav-mobile a (même padding, même border, même typo). */ .ya-nav-mobile .ya-theme-toggle--labeled { width: 100%; height: auto; margin: 0; padding: var(--ya-space-sm) 0; border-radius: 0; border: none; border-bottom: 1px solid var(--ya-border); justify-content: flex-start; gap: var(--ya-space-sm); color: var(--ya-text-primary); background: transparent; } .ya-nav-mobile .ya-theme-toggle--labeled:hover { background: transparent; border-color: var(--ya-border); color: var(--ya-accent-500); } :root[data-theme="light"] .ya-nav-mobile .ya-theme-toggle--labeled:hover { background: transparent; border-color: var(--ya-border); color: var(--ya-accent-500); } .ya-nav-mobile .ya-theme-toggle--labeled:focus-visible { outline: 2px solid var(--ya-accent-500); outline-offset: 2px; border-radius: 2px; }