/* Thème « défaut » du site Podiamill — le pendant web de `src/Podiamill.App/Themes/PodiamillTheme.axaml` (cahier §10.4 « Thème » ; identité visuelle au §7). CE FICHIER NE CONTIENT QUE DES VALEURS, JAMAIS DE MISE EN PAGE. La règle est la même que côté application : une vue ne code jamais une couleur en dur, elle référence un rôle. Ici les rôles sont des variables CSS, et `site.css` ne doit contenir aucun littéral de couleur — un test (`ThemeSiteTests`) le vérifie, parce qu'une couleur en dur qui se glisse dans la feuille de style ne se voit pas tant qu'on n'a pas changé de thème, c'est-à-dire trop tard. Faire évoluer la charte graphique = modifier les valeurs ci-dessous, et rien d'autre. Ajouter un second thème plus tard (pas prévu aujourd'hui, un seul suffit) : copier ce fichier en `themes/.css`, y remplacer `:root` par `[data-theme=""]`, le servir après celui-ci dans `_Layout.cshtml`, et poser l'attribut sur ``. Aucune chaîne de build n'est nécessaire, ce que le cahier §10.4 proscrit — les variables CSS natives suffisent. Les valeurs sont alignées sur le thème « Clinique » de l'application (clair aéré, accent bleu), sans lui être identiques : les deux palettes ont divergé avant cette factorisation (le site est un cran plus froid), et le site y ajoute une matière que l'application n'a pas : des surfaces de verre dépoli sur un décor de lumières (section AE). La colonne « app » de chaque commentaire donne la clé correspondante, pour qu'une charte graphique commune se transpose d'un fichier à l'autre sans avoir à redevenir. */ :root { /* ---------- Surfaces ---------- */ /* Fond général de la page. App : OcAppBackground. */ --fond: #eaf0f8; /* Cartes, encadrés, panneaux posés sur le fond : blanc translucide, qui floute le décor (--verre). App : OcPanel, opaque côté application. */ --surface: rgba(255, 255, 255, .56); /* Variante enfoncée d'une surface (ligne de tableau alternée, zone inerte). App : OcCanvasWell. */ --surface-appuyee: rgba(236, 243, 251, .72); /* Menu déroulant « Plus » : opaque, car l'en-tête qui le porte floute déjà et un second flou n'y verrait rien — le texte de la page transparaîtrait sous les liens. */ --surface-menu: #ffffff; /* Fond de l'en-tête collant. Translucide : le contenu défile visiblement dessous. */ --entete-fond: rgba(255, 255, 255, .58); /* Traits de séparation et contours. App : OcBorder. */ --bordure: #dce4ec; /* Contour des surfaces posées, de l'en-tête et du pied de page : le liseré clair du verre. */ --bordure-carte: rgba(255, 255, 255, .78); /* Reflet sur l'arête haute (le liseré de lumière du verre), puis ombre bleutée diffuse. */ --ombre: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(16, 35, 55, .05), 0 14px 36px rgba(31, 70, 140, .12); /* ---------- Matière (verre dépoli, section AE) ---------- */ /* Décor fixe derrière toute la page, que les surfaces translucides floutent : trois lumières bleues et discrètes — l'accent en haut à gauche, un bleu moyen à droite, un bleu ciel en bas. Assez pâles pour que le texte posé dessus garde son contraste. */ --fond-decor: radial-gradient(48rem 36rem at 6% 4%, rgba(31, 111, 235, .11), transparent 70%), radial-gradient(40rem 34rem at 96% 28%, rgba(70, 130, 240, .08), transparent 70%), radial-gradient(46rem 36rem at 40% 104%, rgba(110, 165, 255, .18), transparent 70%); /* Filtre d'arrière-plan des surfaces posées (cartes, formulaires, pied de page). `none` rendrait le site mat. */ --verre: blur(18px) saturate(170%); /* Filtre d'arrière-plan de l'en-tête collant. */ --entete-flou: blur(20px) saturate(180%); /* Fond du bouton d'action principale (une couleur ou un dégradé). */ --principal-fond: linear-gradient(135deg, #3d86f7 0%, #1f6feb 55%, #1a5ccc 100%); /* ---------- Textes ---------- */ /* App : OcTextPrimary. */ --texte: #16232e; /* Texte secondaire, légendes, aide. App : OcTextSecondary. */ --texte-doux: #55677a; /* ---------- Rôles ---------- */ /* Action principale. App : OcAccent. */ --accent: #1f6feb; /* Survol / appui de l'action principale. App : OcAccentHover. */ --accent-sombre: #1554b8; /* Texte posé SUR un aplat d'accent — doit rester lisible dessus. */ --accent-texte: #ffffff; /* Aboutissement, état sain. App : OcSuccess. */ --succes: #12805c; /* Erreur, action destructive. App : OcDanger. */ --alerte: #b02a37; /* Texte posé SUR un aplat d'alerte (bouton destructif plein). */ --alerte-texte: #ffffff; /* Attention, en chantier. App : OcWarning / OcTextWarning. */ --ambre: #9a6700; /* ---------- Étiquettes d'état ---------- */ /* Aplats pâles derrière les pastilles de statut ; le texte reprend la couleur de rôle correspondante ci-dessus. App : OcChipSuccessBg et voisines. */ --etiquette-ok-fond: #e3f5ee; --etiquette-ko-fond: #fdeaec; --etiquette-attention-fond: #fdf3e0; /* Bandeau « fonctionnalité en chantier ». */ --encart-chantier-fond: #fffaf0; /* ---------- Blocs de code ---------- */ /* Du G-code ou une commande : contraste élevé, indépendant des surfaces claires. */ --code-fond: #16232e; --code-texte: #e6edf3; /* Voile derrière une capture agrandie : la page s'efface, la capture reste lisible. */ --voile: rgba(10, 20, 32, .82); /* ---------- Schémas explicatifs ---------- */ /* Les schémas des pages Fonctionnalités et des tutoriels (Contenu/Schemas/, générés par scripts/visuels/generer-schemas-site.py) : les matières de l'atelier, en aplats doux. */ /* Plaque de matière vue de dessus, et son quadrillage. App : OcCanvasWell. */ --schema-plaque: #e7edf3; --schema-grille: rgba(22, 35, 46, .07); /* Pièce posée (semelle, élément) et sa variante pour l'autre pied. */ --schema-piece: #d3e3fc; --schema-piece-paire: #bcd3f8; /* Élément de correction gagné par l'imbrication, et la place qu'il occupe. */ --schema-element: #c6eadb; --schema-gagne: rgba(18, 128, 92, .07); /* Place perdue par un placement rectangulaire (hachures). */ --schema-perdu: rgba(176, 42, 55, .28); /* Planche martyre en MDF, et son chant. */ --schema-martyr: #e6d3b3; --schema-martyr-bord: #b99a68; /* Texte posé sur le martyr (« MARTYR », « BORD AVANT »). */ --schema-martyr-texte: #5b4a2c; /* Lame à graver et écrou de pince, vus de profil. */ --schema-lame: #d3dae2; --schema-pince: #8996a4; /* Trait de crayon du praticien sur la table. */ --schema-crayon: #3d4752; /* ---------- Formes ---------- */ /* Arrondi commun aux cartes, boutons et champs : trait de charte, pas de mise en page. */ --rayon: 16px; }