/* ================================================================= AI Weather V2 — fond commun des pages françaises. Un seul composant global, jamais dupliqué par page : le quadrillage est porté par , donc il vaut pour les six pages sans qu'aucune feuille de page n'ait à le redéclarer. Pourquoi un fichier séparé plutôt qu'une règle dans base.css : charte.css déclare `body { background: var(--page-bg) }` en raccourci, ce qui réinitialise background-image. Une règle posée en amont serait donc effacée. Cette feuille est chargée après charte.css et avant les feuilles de page. Conséquence voulue de cet ordre : une page qui a besoin de son propre fond pour rester lisible le repose en raccourci dans sa feuille et gagne, sans exception codée ici. C'est le cas de la Station USA, dont le globe exige un fond noir. Valeurs reprises telles quelles à la charte (.hero::before) pour que le langage visuel reste celui des pages déjà abouties : traits rgba(16,32,54,.05), maille 44 px. ================================================================= */ body { background-color: var(--page-bg); background-image: linear-gradient(rgba(16, 32, 54, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 32, 54, .05) 1px, transparent 1px); background-size: 44px 44px; background-position: 0 0; /* Le quadrillage reste fixe et régulier pendant le défilement. Un fond attaché ne participe pas au flux : il ne peut donc pas provoquer de débordement horizontal, sur mobile comme sur ordinateur. */ background-attachment: fixed; } /* Les surfaces qui portent du texte, des données ou des contrôles restent opaques : le quadrillage passe derrière, jamais dessous un contenu à lire. Ces règles ne font que garantir l'opacité ; elles ne changent ni les couleurs ni les espacements existants. */ .panel, .card, .station-card, .widget-card, .format-card, .data-panel { background-color: var(--panel); } /* Écrans très denses : une maille légèrement resserrée garde le même poids optique qu'en 1x. */ @media (max-width: 720px) { body { background-size: 36px 36px; } } /* Le fond décoratif disparaît pour qui demande un contraste renforcé : il ne porte aucune information. */ @media (prefers-contrast: more) { body { background-image: none; } }