/* ========================================================================== COUCHE « SITE » — habillage propre à CE site (artamedia.net), hors du cœur ========================================================================== Pendant CSS de config/site.php : le cœur (base, layout, components, sections, blog, events) doit pouvoir servir n'importe quel site ; tout ce qui n'a de sens que pour celui-ci vit ici. Chargée APRÈS les feuilles du cœur, donc prioritaire à spécificité égale. ⚠️ Ce fichier N'EST PAS écrasé par une mise à jour du cœur. Règle d'admission : une règle a sa place ici dès qu'elle nomme un contenu précis — un slug de section, une page, une image. Le cœur, lui, ne connaît que des composants. ── Sommaire ────────────────────────────────────────────────────────────── 1. Dégradé dans les sous-titres 1 bis. La ligne de sommaire de l'intro (Le bandeau défilant des logos de fournisseurs a vécu ici du 2026-09-10 au 2026-09-11 : carrousel en CSS pure, piste doublée, masque de bords. Il est remplacé par une galerie de six colonnes avec le réglage « Noir et blanc, couleur au survol » — devenu une option du CŒUR, donc réglable depuis l'administration et disponible pour tous les sites. Une rustine de couche site promue en fonction du produit : c'est le bon sens de l'échange.) ========================================================================== */ /* ========================================================================== 1. DÉGRADÉ DANS LES SOUS-TITRES ========================================================================== Le dégradé habille UNE SEULE chose : la phrase qui suit le titre de chaque section de service — « Nous ne revendons pas un CMS du marché… ». Elle passe de la couleur secondaire à l'orange de la charte. POURQUOI PAS LES TITRES. Ils l'ont porté quelques heures, et c'était trop : sept titres dégradés, un h1 dégradé et des sous-titres colorés, la page n'avait plus de hiérarchie — tout criait. Les titres sont revenus à l'encre (--color-heading), et l'effet ne sert plus qu'à distinguer la ligne de promesse du texte courant. LE SÉLECTEUR SUIT LE RÔLE, PAS LE NIVEAU. Depuis la renumérotation du 2026-09-11, un titre de service est un h2 et son sous-titre un h3 (avant : h3 et h4). Ce qui est visé ici est donc « le h3 d'une colonne de service », et non « les h3 du site » : les autres pages — les trois pages légales — ont leurs propres h2/h3 de structure, qui n'ont rien à faire en orange. Les couleurs ne sont PAS écrites en dur : elles se lisent dans les variables de la Charte graphique (--color-secondary, --color-accent), donc un changement de palette dans l'administration suit sans repasser ici, et le mode sombre suit aussi — [data-theme="dark"] redéfinit ces deux variables. ⚠️ `display: inline-block` n'est pas cosmétique, c'est ce qui fait fonctionner l'effet. Un dégradé se peint sur la BOÎTE, pas sur les lettres : en boîte pleine largeur, un texte court ne montrait qu'une tranche du dégradé. En boîte ajustée au contenu, il commence à la première lettre et finit à la dernière. ⚠️ Le réglage « Couleur du titre » de ces sept composants a été VIDÉ dans l'administration (2026-09-11). Une couleur posée là devient un attribut `style` sur la balise, et aucun sélecteur de cette feuille ne peut gagner contre lui : le dégradé serait recouvert d'aplat, sans erreur ni message. Si le dégradé doit disparaître un jour, c'est là que la couleur se remet. */ :root { /* MESURÉ SUR LE SITE EN LIGNE, pas inventé. Les captures de work/printscreen/ montrent un dégradé qui balaie la colonne de l'encre à l'orange : relevé pixel par pixel sur le sous-titre « Nous réalisons des sites Internet… », la couleur du texte passe de #2b190c à gauche à #cc793f à droite, en rampe régulière (les valeurs d'un texte lissé, donc un peu en retrait des extrêmes réels). C'est ce CONTRASTE qui rend l'effet visible. La première version d'ici allait du secondaire à l'accent — deux tons chauds voisins : le dégradé existait dans le code et pas à l'œil. */ --sous-titre-degrade: 90deg, var(--color-heading) 0%, var(--color-accent) 100%; } /* Le @supports protège le `color: transparent` : sans découpe du fond sur le texte, il ne resterait rien à lire. Tous les navigateurs visés le gèrent, mais un sous-titre invisible n'est pas une dégradation acceptable. */ @supports (-webkit-background-clip: text) or (background-clip: text) { .section--generic .section-col h3 { /* `block`, ET PAS `inline-block` : le dégradé doit balayer toute la COLONNE, comme en ligne. En boîte ajustée au texte, la rampe se comprimait sur la ligne la plus longue et les autres lignes n'en montraient qu'une tranche — d'où l'effet à peine perceptible. Chaque ligne parcourt donc la même rampe : elle commence à l'encre et finit à l'orange, et une ligne courte reste sombre. C'est exactement ce que fait le site en ligne. */ display: block; background-image: linear-gradient(var(--sous-titre-degrade)); -webkit-background-clip: text; background-clip: text; color: transparent; } } /* À l'impression, un fond n'est pas garanti — et un texte transparent sur du papier est un texte perdu. On revient à la couleur secondaire. */ @media print { .section--generic .section-col h3 { background-image: none; color: var(--color-heading); } } /* ========================================================================== 1 bis. LA LIGNE DE SOMMAIRE DE L'INTRO ========================================================================== « Installation et dépannage — Gestion des réseaux — Audiovisuel… », sous le h1 de l'accueil. C'était un h4 : un titre de niveau 4 collé à un h1, donc un saut de hiérarchie (h1 → h4), pour une liste de liens qui n'est pas un titre. Elle est redevenue un paragraphe le 2026-09-11 ; ces trois règles lui rendent l'allure qu'elle avait, sans rien promettre à un lecteur d'écran. La classe est portée par le contenu du composant (`p.sommaire-services`) : c'est le seul moyen de viser CETTE ligne, l'intro en comptant deux autres. */ #introservices .sommaire-services { font-family: var(--font-heading); font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); font-weight: 600; line-height: 1.7; margin: 0 0 0.5em; } /* LE DÉGRADÉ PORTE SUR LA LIGNE ENTIÈRE, PAS SUR CHAQUE LIEN. C'est ce que fait le site en ligne, et c'est ce qui rend la chose jolie : une seule rampe de l'encre à l'orange traverse les quatre libellés, au lieu de quatre petits dégradés mis côte à côte. Le fond est donc posé sur le PARAGRAPHE et découpé sur son texte ; les liens, eux, n'ont plus de couleur propre — sans quoi ils repeindraient leurs lettres par-dessus. Les tirets cadratins qui séparaient les libellés ont été retirés du contenu : l'espacement suffit à les distinguer, et le dégradé se lit mieux sans ponctuation au milieu. */ @supports (-webkit-background-clip: text) or (background-clip: text) { #introservices .sommaire-services { background-image: linear-gradient(var(--sous-titre-degrade)); -webkit-background-clip: text; background-clip: text; color: transparent; } #introservices .sommaire-services a { color: transparent; background: none; } } #introservices .sommaire-services a { text-decoration: none; /* L'espace qui remplace les tirets. En marge horizontale plutôt qu'en `gap` : les libellés doivent pouvoir revenir à la ligne d'eux-mêmes. */ margin: 0 0.45em; transition: color var(--transition-base, 0.25s ease); } /* Au survol, le libellé visé quitte le dégradé pour l'orange plein : il se détache de la ligne, et le visiteur voit ce qu'il vise. Le parcours clavier a droit au même signal. */ #introservices .sommaire-services a:hover, #introservices .sommaire-services a:focus-visible { color: var(--color-accent); } @media print { #introservices .sommaire-services, #introservices .sommaire-services a { background-image: none; color: var(--color-heading); } }