/** * YIETO'O — thèmes clair (jour) / sombre (soir, défaut Spotlight) * Activé via data-theme sur */ /* Sombre : valeurs du template Spotlight (soir / choix manuel) */ html[data-theme="dark"] { color-scheme: dark; --background-color: #121212; --default-color: #dcdcdc; --heading-color: #ffffff; --accent-color: #0ee6b0; --surface-color: #2c2c2c; --contrast-color: #000000; --nav-color: #dcdcdc; --nav-hover-color: #0ee6b0; --nav-mobile-background-color: #2c2c2c; --nav-dropdown-background-color: #2c2c2c; --nav-dropdown-color: #dcdcdc; --nav-dropdown-hover-color: #0ee6b0; } html[data-theme="dark"] .header { --surface-color: #060606; } html[data-theme="dark"] .light-background { --background-color: #121212; --surface-color: #464646; } html[data-theme="dark"] .dark-background { --background-color: #01020e; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #252525; --contrast-color: #ffffff; } /* Clair : journée + charte YIETO'O */ html[data-theme="light"] { color-scheme: light; --background-color: #ffffff; --default-color: #333333; --heading-color: #111111; --accent-color: #5eb31b; --surface-color: #f5f5f5; --contrast-color: #ffffff; --nav-color: #333333; --nav-hover-color: #5eb31b; --nav-mobile-background-color: #ffffff; --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #333333; --nav-dropdown-hover-color: #5eb31b; } html[data-theme="light"] .header { --surface-color: #ffffff; } html[data-theme="light"] .header .header-container { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); } html[data-theme="light"] .header .btn-getstarted, html[data-theme="light"] .header .btn-getstarted:focus { background: #ff9624; color: #ffffff; } html[data-theme="light"] .header .btn-getstarted:hover { background: color-mix(in srgb, #ff9624, #000000 10%); color: #ffffff; } html[data-theme="light"] .light-background { --background-color: #f8fbf5; --surface-color: #eef5e8; } html[data-theme="light"] .dark-background { --background-color: #1a3310; --default-color: #e8f5e0; --heading-color: #ffffff; --surface-color: #243d18; --contrast-color: #ffffff; --accent-color: #7ed957; } /* Sélecteur de thème */ .yietoo-theme-toggle { position: relative; flex-shrink: 0; } .yietoo-theme-toggle--desktop { margin-left: 12px; } .yietoo-theme-toggle__btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%); border-radius: 50%; background: transparent; color: var(--heading-color); font-size: 1.15rem; transition: 0.3s; cursor: pointer; } .yietoo-theme-toggle__btn:hover, .yietoo-theme-toggle__btn:focus { border-color: var(--accent-color); color: var(--accent-color); outline: none; } .yietoo-theme-toggle__menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 11rem; margin: 0; padding: 6px 0; list-style: none; background-color: var(--nav-dropdown-background-color, #fff); border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); border-radius: 8px; z-index: 10002; } .yietoo-theme-toggle.is-open .yietoo-theme-toggle__menu { display: block; } .yietoo-theme-toggle__option { display: flex; align-items: center; width: 100%; padding: 8px 16px; border: 0; background: transparent; color: var(--nav-dropdown-color, var(--default-color)); font-family: var(--nav-font, inherit); font-size: 15px; text-align: left; cursor: pointer; } .yietoo-theme-toggle__option:hover, .yietoo-theme-toggle__option:focus { background-color: color-mix(in srgb, var(--accent-color), transparent 90%); color: var(--nav-dropdown-hover-color, var(--accent-color)); outline: none; } .yietoo-theme-toggle__option.active { background-color: var(--accent-color); color: var(--contrast-color); } html[data-theme="light"] .yietoo-theme-toggle__option.active { color: #ffffff; } /* Mobile : icône thème déroulante dans le panneau nav */ @media (max-width: 1199px) { .yietoo-theme-nav-item { border-top: 1px solid color-mix(in srgb, var(--nav-dropdown-color), transparent 85%); margin-top: 6px; } .yietoo-theme-nav-item__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 20px; border: 0; background: transparent; color: var(--nav-dropdown-color); font-family: var(--nav-font); font-size: 17px; font-weight: 500; cursor: pointer; transition: 0.3s; } .yietoo-theme-nav-item__toggle:hover, .yietoo-theme-nav-item__toggle:focus { color: var(--nav-dropdown-hover-color); outline: none; } .yietoo-theme-nav-item__leading { display: flex; align-items: center; font-size: 1.35rem; line-height: 1; } .yietoo-theme-nav-item__toggle .toggle-dropdown { font-size: 12px; line-height: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.3s; background-color: color-mix(in srgb, var(--accent-color), transparent 90%); } .yietoo-theme-nav-item.active .toggle-dropdown { background-color: var(--accent-color); color: var(--contrast-color); transform: rotate(180deg); } .yietoo-theme-nav-item .yietoo-theme-nav-item__btn { display: flex; align-items: center; width: 100%; padding: 10px 20px; border: 0; background: transparent; color: var(--nav-dropdown-color); font-family: var(--nav-font); font-size: 17px; font-weight: 500; text-align: left; cursor: pointer; transition: 0.3s; } .yietoo-theme-nav-item .yietoo-theme-nav-item__btn:hover, .yietoo-theme-nav-item .yietoo-theme-nav-item__btn:focus { color: var(--nav-dropdown-hover-color); outline: none; } .yietoo-theme-nav-item .yietoo-theme-nav-item__btn.active { color: var(--nav-dropdown-hover-color); background-color: color-mix(in srgb, var(--accent-color), transparent 90%); } } /* Pages services — entrée directe sans bandeau page-title */ .yietoo-service-entry { padding-top: 6.5rem; }