/* --------------------------------------------------------------------------- MODE SOMBRE — commun à TOUS les gabarits. Chargé par le greffon « Système — Mode sombre Artano », donc présent sur chaque page du site, que celle-ci tourne sur le gabarit artano ou sur YOOtheme. Les deux sont bâtis sur UIkit 3 : les règles visent ses classes — .uk-card-default, .uk-section-*, .uk-navbar-container — et valent pour l'un comme pour l'autre. NE PAS y mettre de règle propre à un gabarit. Le relief neumorphique d'artano.css, par exemple, vit dans templates/artano/css/artano-site.css : appliqué à YOOtheme, il effacerait ses ombres. Ces règles vivaient dans le champ « Custom LESS » du style YOOtheme, donc en base de données : elles disparaissaient avec le modèle. Elles pilotent le mode sombre, actionné par interface/switch_dark_mode.php qui pose la classe « dark-mode » sur . Fichier séparé À DESSEIN : artano.css est engendré par comparaison et peut être regénéré. Celui-ci ne l'est jamais. Les retouches personnelles vont ici. --------------------------------------------------------------------------- MODE SOMBRE — remis à plat le 25 août 2026. La version précédente portait DEUX systèmes superposés : des valeurs en dur d'abord, puis un bloc « reprise par les variables » qui en écrasait une partie. Résultat, cinq gris presque identiques pour ce qui aurait dû en compter trois — le fond de page recevait #101216 puis #0c1018, une carte #191d24 puis #151b26, pendant qu'un déroulant restait à #191d24 et la barre à #15181e. Quatre surfaces voisines mais différentes, d'où l'impression de décalage permanent. Ici : les tons sont déclarés UNE fois, en variables, et plus aucune règle ne porte de valeur en dur. Ajouter un composant, c'est lui donner une variable existante — pas inventer un gris de plus. Trois niveaux, pas davantage : fond le sol de la page surface tout ce qui est posé dessus — cartes, champs, déroulants, panneaux pied la bande secondaire, franchement plus sombre pour rester une bande La séparation fond/surface est volontairement discrète (1,14) et c'est la BORDURE qui détache les cartes. Éclaircir la surface pour les détacher aurait fait retomber l'accent sous le seuil de lisibilité : 4,61 sur la surface actuelle, 4,22 si on l'éclaircit d'un cran. --------------------------------------------------------------------------- */ /* Transition générale */ html, body, .tm-page, .uk-section, .uk-card, .uk-navbar-container, .uk-modal-dialog, .uk-dropdown { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* Icônes du bouton */ .theme-icon-dark { display: none; } html.dark-mode .theme-icon-light { display: none; } html.dark-mode .theme-icon-dark { display: inline-flex; } #theme-toggle { cursor: pointer; } /* =========================================================================== MODE SOMBRE =========================================================================== */ /* Les seules valeurs du mode sombre. Contrastes mesurés, seuil AA = 4,5 : texte sur fond 15,3 · sur surface 14,1 atone sur fond 7,6 · sur surface 6,9 accent sur fond 5,3 · sur surface 4,6 */ html.dark-mode { --artano-fond: #101319; --artano-surface: #1C2029; --artano-pied: #080A0D; --artano-bordure: #2E3440; --artano-texte: #ECEEF7; --artano-atone: #A0AABA; /* Le bleu de marque remonté pour un fond sombre. Posé tel quel, #2957FF donne 3,3 de contraste sur la page : illisible. Si la couleur du modèle change, cette valeur est à reprendre — elle ne se calcule pas en CSS. */ --artano-accent: #5C7FFF; } /* ── Sol et bandes ────────────────────────────────────────────────────── */ html.dark-mode, html.dark-mode body, html.dark-mode .tm-page, html.dark-mode .uk-section-default, html.dark-mode .uk-tile-default { background-color: var(--artano-fond); color: var(--artano-texte); } /* « muted » doit rester une bande DISTINCTE : les deux étaient au même gris, l'alternance des sections avait disparu. */ html.dark-mode .uk-section-muted, html.dark-mode .uk-tile-muted { background-color: var(--artano-surface); color: var(--artano-texte); } html.dark-mode .uk-section-secondary, html.dark-mode .tm-footer { background-color: var(--artano-pied); background-image: none; } /* ── Barre et navigation ──────────────────────────────────────────────── */ html.dark-mode .uk-navbar-container, html.dark-mode .tm-header, html.dark-mode .tm-header-mobile { background-color: var(--artano-surface); color: var(--artano-texte); } html.dark-mode .uk-navbar-nav > li > a, html.dark-mode .uk-navbar-item, html.dark-mode .uk-navbar-toggle { color: var(--artano-texte); } html.dark-mode .uk-navbar-nav > li > a:hover, html.dark-mode .uk-navbar-nav > li.uk-active > a { color: #FFFFFF; } /* ── Texte ────────────────────────────────────────────────────────────── */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode .uk-heading-small, html.dark-mode .uk-heading-medium, html.dark-mode .uk-heading-large, html.dark-mode .uk-card-title { color: #FFFFFF; } html.dark-mode p, html.dark-mode li, html.dark-mode td, html.dark-mode .uk-table th { color: var(--artano-texte); } html.dark-mode .uk-text-meta, html.dark-mode .uk-text-muted, html.dark-mode .uk-form-label, html.dark-mode .uk-article-meta, html.dark-mode .uk-description-list > dt { color: var(--artano-atone); } /* ── Surfaces posées ──────────────────────────────────────────────────── */ html.dark-mode .uk-card-default, html.dark-mode .uk-card-muted, html.dark-mode .uk-dropdown, html.dark-mode .uk-dropbar, html.dark-mode .uk-navbar-dropdown, html.dark-mode .uk-modal-dialog, html.dark-mode .uk-offcanvas-bar, html.dark-mode .uk-input, html.dark-mode .uk-select, html.dark-mode .uk-textarea { background-color: var(--artano-surface); color: var(--artano-texte); border-color: var(--artano-bordure); } /* C'est la bordure qui détache les cartes, pas un gris de plus. */ html.dark-mode .uk-card-default, html.dark-mode .uk-card-muted, html.dark-mode .uk-dropdown, html.dark-mode .uk-navbar-dropdown, html.dark-mode .uk-modal-dialog { border: 1px solid var(--artano-bordure); } html.dark-mode .uk-input::placeholder, html.dark-mode .uk-textarea::placeholder { color: var(--artano-atone); } /* ── Traits ───────────────────────────────────────────────────────────── */ html.dark-mode hr, html.dark-mode .uk-hr, html.dark-mode .uk-divider-icon::before, html.dark-mode .uk-table th, html.dark-mode .uk-table td, html.dark-mode .uk-table-divider > tr:not(:first-child), html.dark-mode .uk-table-divider > :not(:first-child) > tr, html.dark-mode .uk-panel, html.dark-mode .uk-grid-divider > :not(.uk-first-column)::before, html.dark-mode .uk-heading-divider { border-color: var(--artano-bordure); } /* ── Liens et bouton principal ────────────────────────────────────────── */ html.dark-mode a:not(.uk-button):not(.uk-navbar-item):not(.uk-logo) { color: var(--artano-accent); } html.dark-mode a:not(.uk-button):not(.uk-navbar-item):not(.uk-logo):hover { color: #FFFFFF; } html.dark-mode .uk-button-primary { background-color: var(--artano-accent); background-image: none; color: #FFFFFF; } html.dark-mode .uk-button-default { background-color: transparent; color: var(--artano-texte); border-color: var(--artano-bordure); } /* UIkit repeint « uk-button-primary » en blanc à texte gris dans ses contextes inversés — pied de page, cartes secondaires — et ses sélecteurs sont plus spécifiques que le nôtre : le bouton du pied redevenait blanc. En mode clair la charte corrige déjà cela ; il faut le refaire ici, avec assez de poids. */ html.dark-mode .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary, html.dark-mode .uk-section-primary:not(.uk-preserve-color) .uk-button-primary, html.dark-mode .uk-card-secondary.uk-card-body .uk-button-primary, html.dark-mode .uk-light .uk-button-primary, html.dark-mode .uk-offcanvas-bar .uk-button-primary { background-color: var(--artano-accent); background-image: none; color: #FFFFFF; }