/* =========================================================================== ATLAS — thèmes =========================================================================== Un thème = un jeu de variables, rien d'autre. Aucune couleur en dur ailleurs dans le code : ajouter un thème se limite à recopier un bloc ci-dessous et à déclarer son nom dans lib/Themes.php. Le thème est porté par l'attribut `data-theme` sur , ce qui permet de le changer à chaud sans recharger la page. Variables, par rôle et non par couleur — c'est ce qui rend l'ajout d'un thème indolore : --at-fond fond de page --at-surface cartes, tuiles, tableaux --at-surface-2 creux : vignettes vides, champs --at-surface-3 survol d'une ligne --at-bordure trait courant --at-bordure-forte trait appuyé --at-texte texte principal --at-texte-doux texte secondaire, légendes --at-texte-faible texte estompé, icônes de remplissage --at-accent liens, éléments actifs, focus --at-accent-fond fond d'un élément actif --at-accent-texte texte posé SUR --at-accent --at-marque bandeaux d'en-tête, couleur d'identité --at-barre fond de la barre du haut --at-succes confirmation --at-lisere-h hauteur du liseré haut/bas (0 = pas de liseré) --at-lisere dégradé du liseré =========================================================================== */ /* ── IAV — thème par défaut, couleurs de ~/Model/web/tokens.css ───────────── */ :root, :root[data-theme="iav"] { --at-fond: #0d1117; --at-surface: #161b22; --at-surface-2: #21262d; --at-surface-3: #1c2230; --at-bordure: #30363d; --at-bordure-forte: #3d4451; --at-texte: #e6edf3; --at-texte-doux: #8b949e; --at-texte-faible: #6e7681; --at-accent: #58a6ff; --at-accent-fond: #17243a; --at-accent-texte: #0d1117; --at-marque: #215387; /* bleu foncé IAV */ --at-marque-2: #2B6CB0; /* bleu principal IAV */ --at-barre: #161b22; --at-succes: #3fb950; --at-lisere-h: 0px; --at-lisere: none; } /* ── Matrix — vert phosphore sur presque noir ───────────────────────────── La palette, et rien de plus : pas de pluie de caractères, pas de police à chasse fixe imposée. C'est l'ambiance qui est reprise, pas le décor. */ :root[data-theme="matrix"] { --at-fond: #050806; --at-surface: #0b120d; --at-surface-2: #101a13; --at-surface-3: #14231a; --at-bordure: #1d3b26; --at-bordure-forte: #2b5c39; --at-texte: #46f77e; /* vert phosphore */ --at-texte-doux: #2fbf5f; --at-texte-faible: #1f7d3f; --at-accent: #8dffb4; /* vert plus clair pour les éléments actifs */ --at-accent-fond: #0f2a19; --at-accent-texte: #050806; --at-marque: #0d3b1f; --at-marque-2: #17a84e; --at-barre: #080f0a; --at-succes: #8dffb4; --at-lisere-h: 0px; --at-lisere: none; } /* ── Garage — les voitures de David ─────────────────────────────────────── Gris métallisé foncé (Tesla) en fond, gris métallisé clair (Polo 1.4 TDI) pour les surfaces, blanc (Caddy) pour le texte, rouge feu (Polo GTi) en accent. Le rouge reste rare : c'est ce qui le garde lisible. Écart assumé : un gris métallisé clair « vrai » rendrait le texte blanc illisible. Les surfaces sont donc un gris moyen, clair PAR RAPPORT au fond, ce qui conserve l'étagement des tôles sans sacrifier la lecture. */ :root[data-theme="garage"] { --at-fond: #22262a; /* Tesla, gris métallisé foncé */ --at-surface: #32383f; /* Polo, gris métallisé clair */ --at-surface-2: #3b424a; --at-surface-3: #454d56; --at-bordure: #4d565f; --at-bordure-forte: #67727d; --at-texte: #ffffff; /* Caddy, blanc */ --at-texte-doux: #c2cad2; --at-texte-faible: #8b959f; --at-accent: #ff3b30; /* Polo GTi, rouge feu */ --at-accent-fond: #3d2529; /* Blanc sur ce rouge ne donne que 3,55:1, sous le seuil de 4,5 exigé pour du texte. Un texte sombre monte à 5,9:1 et garde le rouge vif tel quel — c'est l'accent qu'on veut préserver, pas la couleur du texte posé dessus. */ --at-accent-texte: #1a0d0b; --at-marque: #8f1109; --at-marque-2: #ff3b30; --at-barre: #1a1d21; --at-succes: #4ad471; --at-lisere-h: 0px; --at-lisere: none; } /* ── Luxembourg — sobre, liseré tricolore en haut et en bas ─────────────── Le dégradé est repris tel quel du site eismeenung.lu (Header.tsx et Footer.tsx) : mêmes valeurs rgba, même sens de lecture rouge → blanc → bleu clair. Là-bas il habille tout le bandeau ; ici il est ramené à un liseré de 2 px, comme demandé. */ :root[data-theme="luxembourg"] { --at-fond: #11161d; --at-surface: #1a212a; --at-surface-2: #222b36; --at-surface-3: #273140; --at-bordure: #2f3a47; --at-bordure-forte: #435161; --at-texte: #eef3f8; --at-texte-doux: #9fadbd; --at-texte-faible: #75828f; --at-accent: #4db8e8; /* bleu du drapeau, éclairci pour le contraste */ --at-accent-fond: #12303f; --at-accent-texte: #08131b; --at-marque: #1b3a52; --at-marque-2: #4db8e8; --at-barre: #141b23; --at-succes: #4ad471; --at-lisere-h: 2px; --at-lisere: linear-gradient(to right, rgba(239,0,0,.88), rgba(255,255,255,.88), rgba(0,161,222,.88)); } /* =========================================================================== Application des variables — commune à toutes les pages =========================================================================== */ body { background: var(--at-fond); color: var(--at-texte); } /* Liseré tricolore : présent dans le balisage de toutes les pages, mais de hauteur nulle hors du thème Luxembourg. Aucun code conditionnel. */ .at-lisere { height: var(--at-lisere-h); background: var(--at-lisere); width: 100%; } .at-lisere-bas { position: fixed; bottom: 0; left: 0; right: 0; height: var(--at-lisere-h); background: var(--at-lisere); z-index: 1040; pointer-events: none; } .navbar.bg-dark { background-color: var(--at-barre) !important; } .navbar .navbar-brand, .navbar .btn-outline-light { color: var(--at-texte); } .card-article { background: var(--at-surface); border-color: var(--at-bordure); } .card-article:hover { border-color: var(--at-accent); } .thumb, .thumb-placeholder { background: var(--at-surface-2); } .thumb-placeholder { color: var(--at-texte-faible); } .stat-pil { background: var(--at-surface); border-color: var(--at-bordure); color: var(--at-texte-doux); } .stat-pil .v { color: var(--at-texte); } .stat-pil:hover { border-color: var(--at-accent); color: var(--at-texte); } .stat-pil.actif { border-color: var(--at-accent); background: var(--at-accent-fond); color: var(--at-texte); } .stat-pil.total { border-color: var(--at-bordure-forte); } .stat-pil.accent { border-color: var(--at-accent); } .stat-pil.accent .v { color: var(--at-accent); } .stat-pil.ok .v { color: var(--at-succes); } .stat-card { background: var(--at-surface); border-color: var(--at-bordure); } .stat-card.accent{ border-color: var(--at-accent); } .bandeau { background: linear-gradient(90deg, var(--at-marque), var(--at-surface)); border-color: var(--at-bordure); } .table-rec { border-color: var(--at-bordure); } .table-rec > :not(caption) > * > * { background: var(--at-surface); border-color: var(--at-bordure); } .table-rec tbody tr:hover > * { background: var(--at-surface-3); } .vign, .vign-vide { background: var(--at-surface-2); } .vign-vide { color: var(--at-texte-faible); } .mono { color: var(--at-texte-doux); } .text-secondary { color: var(--at-texte-doux) !important; } .text-light { color: var(--at-texte) !important; } a { color: var(--at-accent); } /* Contrôles de formulaire : ils portaient les couleurs de Bootstrap en dur. */ .form-control, .form-select { background-color: var(--at-surface-2); border-color: var(--at-bordure); color: var(--at-texte); } .form-control:focus, .form-select:focus { background-color: var(--at-surface-2); border-color: var(--at-accent); color: var(--at-texte); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--at-accent) 25%, transparent); } .input-group-text { background-color: var(--at-surface); border-color: var(--at-bordure); color: var(--at-texte-doux); } .dropdown-menu-dark { background-color: var(--at-surface); border-color: var(--at-bordure); } .dropdown-menu-dark .dropdown-item { color: var(--at-texte); } .dropdown-menu-dark .dropdown-item:hover { background-color: var(--at-surface-3); } .page-link { background: var(--at-surface); border-color: var(--at-bordure); color: var(--at-texte); } .page-item.active .page-link { background: var(--at-accent); border-color: var(--at-accent); color: var(--at-accent-texte); } .modal-content.bg-dark { background: var(--at-surface) !important; } .table-dark { --bs-table-bg: var(--at-surface); --bs-table-color: var(--at-texte); } /* Aperçu d'un thème dans les réglages : une pastille de trois couleurs. */ .apercu-theme { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--at-bordure); vertical-align: middle; } .apercu-theme span { width: 16px; height: 16px; display: block; } /* =========================================================================== Taille du texte — quatre crans =========================================================================== Une seule variable, `--at-echelle`, dont tout dépend. Ajouter un cran se limite à un bloc de trois lignes ici et une entrée dans lib/Affichage.php. L'échelle agit sur la taille de police racine : tout ce qui est exprimé en `rem` — c'est-à-dire l'essentiel de Bootstrap et de l'interface — suit sans qu'aucune autre règle n'ait à être touchée. Les vignettes, exprimées en pixels, sont mises à l'échelle explicitement pour rester proportionnées. =========================================================================== */ :root { --at-echelle: 1; } :root[data-taille="compact"] { --at-echelle: .875; } :root[data-taille="normal"] { --at-echelle: 1; } :root[data-taille="confortable"] { --at-echelle: 1.125;} :root[data-taille="grand"] { --at-echelle: 1.28; } html { font-size: calc(16px * var(--at-echelle)); } /* Les vignettes du catalogue suivent l'échelle : à « grand », des cartes de texte agrandies au-dessus d'images figées donneraient une grille bancale. */ .thumb, .thumb-placeholder { height: calc(120px * var(--at-echelle)); } @media (max-width:576px) { .thumb, .thumb-placeholder { height: calc(96px * var(--at-echelle)); } } .photo-thumb { width: calc(80px * var(--at-echelle)); height: calc(80px * var(--at-echelle)); } .vign, .vign-vide { width: calc(52px * var(--at-echelle)); height: calc(52px * var(--at-echelle)); } /* =========================================================================== Barre du haut fixée =========================================================================== La barre reste visible au défilement : recherche, statut et filtre sont les trois commandes utilisées en permanence, il ne doit plus falloir remonter en haut de page pour les atteindre. `--at-barre-h` est mesurée par le navigateur et sert à deux choses : décaler le contenu sous la barre, et décaler les ancres internes — sans quoi un lien `#quelquechose` ferait atterrir le contenu caché dessous. =========================================================================== */ .navbar-atlas { position: sticky; top: 0; z-index: 1030; background: var(--at-barre); border-bottom: 1px solid var(--at-bordure); } /* Le liseré tricolore reste au-dessus de la barre et suit le défilement. */ body > .at-lisere { position: sticky; top: 0; z-index: 1031; } /* Toute cible d'ancre se positionne sous la barre, jamais dessous. */ :target { scroll-margin-top: calc(var(--at-barre-h, 56px) + 8px); } html { scroll-padding-top: calc(var(--at-barre-h, 56px) + 8px); } /* Contrôles de la barre : compacts, mais jamais sous la taille confortable au doigt (38 px de haut, la recommandation courante pour une cible tactile). */ .navbar-atlas .form-control-sm, .navbar-atlas .form-select-sm, .navbar-atlas .btn-sm { min-height: 32px; } @media (hover:none) { .navbar-atlas .form-control-sm, .navbar-atlas .form-select-sm, .navbar-atlas .btn-sm { min-height: 38px; } } .navbar-atlas .recherche { min-width: 140px; max-width: 320px; flex: 1 1 180px; } /* En largeur réduite, la barre se replie sur deux lignes plutôt que de tasser : marque et menus au-dessus, recherche et filtres en dessous, sur toute la largeur. Compacter n'est pas entasser. */ @media (max-width: 767.98px) { .navbar-atlas .zone-recherche { width: 100%; order: 3; } .navbar-atlas .recherche { max-width: none; } } /* =========================================================================== Les deux boutons ronds de la barre : maintenance et site public =========================================================================== Ils vont par paire : même forme, même taille, même traitement. Seule la couleur les distingue, et c'est voulu — le bouton de maintenance porte un ÉTAT (rouge ou vert), celui du site public une ACTION. Le bouton du site public reste donc neutre au repos : lui donner la couleur d'accent le ferait virer au rouge dans le thème Garage, juste à côté du rouge de maintenance. L'accent n'apparaît qu'au survol. La taille suit l'échelle typographique, pour que la paire reste proportionnée du réglage « compact » au réglage « grand ». =========================================================================== */ .btn-rond-barre { width: calc(34px * var(--at-echelle)); height: calc(34px * var(--at-echelle)); flex-shrink: 0; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .btn-site-public { border: 1px solid var(--at-bordure-forte); color: var(--at-texte); background: transparent; transition: background .28s, border-color .28s, color .28s; } .btn-site-public:hover, .btn-site-public:focus-visible { background: var(--at-accent); border-color: var(--at-accent); color: var(--at-accent-texte); } /* Sur écran tactile, la barre impose 38 px de haut minimum à ses `.btn-sm`. Appliquée telle quelle à un bouton rond de 30 px de large (taille « compact »), cette règle le rendrait OVALE. On force donc les deux dimensions ensemble : la cible reste confortable au doigt, et le bouton reste rond. */ @media (hover: none) { .btn-rond-barre { width: max(38px, calc(34px * var(--at-echelle))); height: max(38px, calc(34px * var(--at-echelle))); min-height: 0; } }