/* ========================================================================= THEME CLAIR — vitrine de la Tour de contrôle Fait par Merline le 08/08 (demande Patrick). Aucun contenu n'est change : ce fichier ne fait que SURCHARGER le theme sombre quand est pose — choix memorise dans localStorage par vitrine-theme.js. Valeurs inspirees d'eazytraining.fr : fond tres clair, cartes blanches, texte sombre, accent bleu. Le theme sombre reste la valeur par defaut. ========================================================================= */ /* --- Les variables de base changent partout d'un coup -------------------- */ html[data-theme="clair"]{ --fond:#f4f6fb; --surface:#ffffff; --surface2:#e2e8f0; --texte:#1e293b; --doux:#5b6b83; --primaire:#2563eb; --ok:#16a34a; } /* --- En-tetes : blancs, pour un contraste net avec le fond gris ---------- */ html[data-theme="clair"] header.tete{background:#ffffff} /* --- Survols de la vitrine (les couleurs en dur du theme sombre) --------- */ html[data-theme="clair"] .btn.fantome:hover{border-color:#cbd5e1} html[data-theme="clair"] .carte:hover, html[data-theme="clair"] .tete-equipe:hover, html[data-theme="clair"] ol.etapes li:hover{ border-color:#cbd5e1; box-shadow:0 16px 30px -24px rgba(15,23,42,.25); } html[data-theme="clair"] .offre:hover{ border-color:#cbd5e1; box-shadow:0 18px 40px -28px rgba(15,23,42,.22); } html[data-theme="clair"] .dd-btn:hover{border-color:#cbd5e1} html[data-theme="clair"] .dd-menu a:hover, html[data-theme="clair"] .nav-tour .dropdown-item:hover, html[data-theme="clair"] .nav-tour .dropdown-item:focus{ background:rgba(37,99,235,.09); } /* --- Menus deroulants : ombre douce, lisible sur blanc ------------------- */ html[data-theme="clair"] .dd-menu, html[data-theme="clair"] .nav-tour .dropdown-menu{ box-shadow:0 18px 45px -22px rgba(15,23,42,.32); } /* --- Articles : le texte et les titres etaient en dur clair/sombre ------ */ html[data-theme="clair"] article p, html[data-theme="clair"] article li{color:#334155} html[data-theme="clair"] article h2{color:#1d4ed8} /* ========================================================================= LE SWITCH (bouton de changement de theme), present sur chaque page. Il est cree par vitrine-theme.js dans l'en-tete, tout a droite. ========================================================================= */ #theme-switch{ display:inline-flex;align-items:center;justify-content:center; width:3rem;height:1.75rem;padding:0;margin-left:.5rem; border:1px solid var(--surface2);border-radius:99px; background:var(--surface);cursor:pointer; box-shadow:0 1px 6px rgba(15,23,42,.14); flex:0 0 auto;position:relative;z-index:1200; transition:border-color .18s ease; } #theme-switch:hover{border-color:var(--primaire)} #theme-switch .ts-piste{ position:absolute;inset:2px;border-radius:99px; background:var(--surface2);overflow:hidden; transition:background .22s ease; } html[data-theme="clair"] #theme-switch .ts-piste{background:var(--primaire)} #theme-switch .ts-rond{ position:absolute;top:2px;left:2px;width:calc(1.75rem - 8px); height:calc(1.75rem - 8px);border-radius:50%;background:#fff; box-shadow:0 1px 4px rgba(15,23,42,.35);z-index:2; transition:transform .22s ease; } html[data-theme="clair"] #theme-switch .ts-rond{transform:translateX(1.25rem)} #theme-switch .ts-icone{ position:absolute;top:50%;transform:translateY(-50%);z-index:1; width:.95rem;height:.95rem; } #theme-switch .ts-icone.lune{left:.3rem;color:#94a3b8} html[data-theme="clair"] #theme-switch .ts-icone.lune{color:#dbeafe} #theme-switch .ts-icone.soleil{right:.3rem;color:#f59e0b} html[data-theme="clair"] #theme-switch .ts-icone.soleil{color:#fde68a} /* Pages sans en-tete (jeux) : le bouton se fixe en haut a droite. */ #theme-switch.fixe{ position:fixed;top:.75rem;right:.9rem;margin:0; } /* --- Les champs de saisie doivent rester lisibles en clair --------------- La barre de recherche des articles et le chat gardaient leur fond sombre en theme clair (couleurs en dur dans les pages) : fond blanc, texte sombre, bordure douce, focus bleu net. */ html[data-theme="clair"] #tdc-cherche, html[data-theme="clair"] .chatbr-pied input, html[data-theme="clair"] input[type="text"], html[data-theme="clair"] input[type="search"], html[data-theme="clair"] input[type="email"], html[data-theme="clair"] input[type="password"], html[data-theme="clair"] textarea, html[data-theme="clair"] select{ background:#ffffff; color:#1e293b; border:1px solid #cbd5e1; } html[data-theme="clair"] #tdc-cherche::placeholder, html[data-theme="clair"] .chatbr-pied input::placeholder{ color:#64748b; } html[data-theme="clair"] #tdc-cherche:focus, html[data-theme="clair"] .chatbr-pied input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); } html[data-theme="clair"] .btn-lien { border-color: #dadce0; background: #ffffff; color: #1a73e8; }