/* Theme Name: Salient Child, Finnso Bois Theme URI: https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266 Description: Thème enfant Salient du projet Finnso Bois. Seul ce dossier est versionné : le thème parent « salient » est tiré du repo vendor au démarrage. Author: Numeria Communication Author URI: https://numeria-communication.fr Template: salient Version: 1.0.0 */ /* ============================================================================= * OÙ ÉCRIRE LE CSS : convention Numeria (2 couches, ne pas les mélanger) * * 1. CE FICHIER (style.css) → composants CODÉS dans le thème enfant : * templates surchargés, WooCommerce, header, * footer, écrans de compte… * 2. assets/css/custom.css → couche MARKETING / page builder (WPBakery). * C'est le miroir versionné du champ « Custom * CSS Code » de Salient (Theme Options). * ⚠️ Ce champ DOIT rester vide tant qu'on * travaille en fichier, sinon l'inline écrase. * * Le style.css enfant est déjà mis en file d'attente par Salient (handle * « salient-child-style », prio 90) : ne pas le ré-enqueuer. functions.php se * contente de repointer sa version sur filemtime() (cache-busting). * ========================================================================== */ /* ============================================================================= * Variables de charte : relevées des VARIABLES FIGMA du fichier DEV-FINN * (get_variable_defs sur les nœuds 3-61, 1-2, 251-520), le 2026-09-17. À utiliser * PARTOUT plutôt que des valeurs en dur. * * Les huit couleurs ci-dessous sont la charte, au nom que lui donne la maquette. * Les filets suivent : ce ne sont pas des variables Figma, mais les mêmes quatre * opacités reviennent sur les trois pages. Les alias qui terminent le bloc * existent parce que le SOCLE COMMUN (assets/css/custom.css § 2) et les * composants hérités du kit les nomment ainsi : ils ne sont pas une seconde * charte, ils pointent la première. * ========================================================================== */ :root { /* ── La charte, telle que la maquette la nomme ─────────────────────────── */ --brand-blue: #205AA6; /* « Bleu charte » : texte, boutons, filets */ --brand-blue-deep: #144075; /* « Bleu plus foncé » : cadres Partenaires, Nous choisir */ --brand-blue-light: #2B73BA; /* « Bleu plus clair » : contour du bouton sur cadre foncé */ --brand-copper: #C77A36; /* « cuivre » : numéros, texte survolé des méga-menus */ --brand-cream: #FDFBF8; /* « Fond blanc cassé » : fond de page, cartes partenaires */ --brand-beige: #F0EBE9; /* « Beige clair » : cartes services, contour des tags */ --brand-border: #EDE9E8; /* « Contour blocs blancs » : méga-menus, blocs logo */ --brand-white: #FFFFFF; /* ── Filets : le bleu charte à quatre opacités, le blanc à deux ─────────── * * .35 rubriques, secteurs, items de menu · .3 liens « découvrir » · .2 pied * de page · .5 tag survolé. Sur bleu foncé : blanc .2 (rubrique), .15 (blocs * argument), .5 (bouton verre), .6 (item de menu survolé). */ --brand-rule: rgba(32, 90, 166, .35); --brand-rule-soft: rgba(32, 90, 166, .3); --brand-rule-faint: rgba(32, 90, 166, .2); --brand-rule-strong: rgba(32, 90, 166, .5); --brand-rule-on-blue: rgba(255, 255, 255, .2); --brand-rule-on-blue-faint: rgba(255, 255, 255, .15); /* ── Alias attendus par le socle commun et les composants du kit ──────── * * ⚠️ PROVISOIRES tant que le composant correspondant n'est pas monté : ces * rôles (bleu profond, accent, cuivré clair, gris bleu, parme, beurre, olive) * viennent de la charte de Tera, dont ce thème enfant est issu. Chacun se * retranche sur la couleur de la charte la plus proche par le RÔLE, et se * re-décide à la mesure au moment de monter le composant, pas ici. */ --brand-navy: var(--brand-blue); /* texte, fonds forts */ --brand-navy-deep: var(--brand-blue-deep); /* bandes et cartes */ --brand-accent: var(--brand-copper); /* l'accent : focus, numéros */ --brand-copper-light: var(--brand-copper); /* contours et survols */ --brand-blue-grey: var(--brand-rule); /* filets */ --brand-olive: var(--brand-copper); /* aucun équivalent, jamais dessiné */ --brand-parme: var(--brand-border); /* filets et fonds froids */ --brand-parme-light: var(--brand-cream); /* fond très clair */ --brand-blue-sky: var(--brand-blue-light); /* ombre de survol */ --brand-butter: var(--brand-copper); /* fin de dégradé chaud */ --brand-yellow: var(--brand-beige); /* fond chaud */ /* ── Typographie ───────────────────────────────────────────────────────── * * UNE famille pour tout ce qui se lit et se titre : Syne (400 corps, 500 * H1 et menu, 600 sur-titres, H4 et liens). La seconde, Bricolage Grotesque * Light 300, n'a qu'UN emploi : les numéros « 01 » des blocs service * (nœud 109:1503). Les deux sont sur Google Fonts ; Salient auto-héberge * Syne (Theme Options), le thème enfant sert Bricolage 300 (includes/polices.php). */ --font-title: "Syne", sans-serif; /* h1-h6, sur-titres */ --font-text: "Syne", sans-serif; /* corps */ --font-over: "Syne", sans-serif; /* sur-titres capitales */ --font-numeral: "Bricolage Grotesque", sans-serif; /* numéros des blocs service, 300 */ } /* Le fond de page : « Fond blanc cassé ». Il n'a pas de champ Salient hors mise en page « boxed » (cf. scripts/set-colors.php), il vit donc ici. */ body { background-color: var(--brand-cream); } /* ============================================================================= * Titres : ce que les Theme Options ne portent pas * * Familles, tailles, graisses et capitales viennent de Salient → Theme Options * (cf. scripts/set-typography.php). Restent ici : * * · les INTERLIGNES, posés en ratio SANS UNITÉ. Salient n'applique ses % de * responsive qu'au font-size : un line-height en px resterait figé et casserait * à petit écran, alors qu'un ratio suit automatiquement chaque palier. * · les COULEURS, que le champ typographique de Salient ne gère pas. * ========================================================================== */ /* ⚠️ Sélecteurs préfixés `body` : le CSS compilé de Salient déclare ses titres en `h1, body h1, …`. Un simple `h1 { line-height }` se fait écraser (mesuré sur Tera : H1 à 1.1 au lieu de 1.25). On aligne la spécificité. ⚠️ Et pour H3 et H4, `body` ne suffit PAS : Salient les déclare AUSSI en `.row .col h3` (0-2-1), avec un interligne EN PIXELS. Dès qu'un titre vit dans une rangée du page builder, c'est-à-dire partout sur ce site, c'est cette valeur-là qui s'applique. On aligne donc la spécificité une seconde fois, sans toucher aux TAILLES, qui restent celles des Theme Options et suivent leurs paliers responsive. ⚠️ H2 aussi : dans ses deux dernières media queries (max 999 et max 690), Salient écrit `.col h2, body h2, …` (0-1-1), qui passe devant un `body h2` (0-0-2). Mesuré sur Tera : deux paliers sur quatre étaient faux sans que rien ne le signale. */ /* Les ratios de la maquette, MESURÉS sur les nœuds et non lus dans les variables (qui annoncent « lineHeight: 100 » pour H2 et H3 alors que le rendu est `normal`) : H1 à 1 (`leading-none`, nœud 4:2), H2 et H3 à 1,2 (trois lignes de 46 = 165 px, nœud 95:1470 ; deux lignes de 34 = 82 px, 109:1501), H4 à H6 et le corps à 1,5 (variables H4, Sur-titre, Corps). */ body h1 { line-height: 1; } body h2, body .row .col h2, body h3, body .row .col h3 { line-height: 1.2; } body h4, body .row .col h4, body h5, body .row .col h5, body h6, body .row .col h6 { line-height: 1.5; } body { line-height: 1.5; } /* ⚠️ AUCUNE couleur de H1 n'est posée ici, et c'est une DÉCISION, pas un oubli. * * Le réflexe repris des autres sites est `h1 { color: var(--brand-white) }`, * parce que le titre y vit sur un en-tête sombre. Elle est INERTE : le CSS * compilé de Salient déclare `body, body h1, body h2…` (0-0-2), qui bat un `h1` * seul (0-0-1). Mesuré ici même — la règle était bien dans la feuille, et le H1 * sortait quand même au bleu profond de `overall-font-color`. * * Et c'est heureux : sur Tera, le blanc ne vaut PAS pour tous les H1. Les quatre * maquettes posent le titre sur une photo sombre, mais les pages légales et * toute page sans hero l'auront sur fond clair, où un H1 blanc serait invisible. * * Le blanc se posera donc AVEC le hero, sur la rangée qui le porte, au montage — * et avec le préfixe `body` s'il doit battre Salient. */ /* ============================================================================= * Composants du thème enfant * ========================================================================== */ /* ─────────────────────────────── Pied de page ────────────────────────────── * * * Rendu par la Global Section « Footer » (scripts/create-footer.php), accrochée à * `nectar_hook_global_section_footer` et affichée partout. Son contenu vit dans * content/footer/global-section.html : logo à gauche, bloc de contact à droite. * * ⚠️ La ligne de mentions légales SOUS ce bloc n'est pas ici : c'est la barre de * copyright de Salient, réglée par scripts/set-footer-options.php et habillée au * § suivant. * * ── Ce que la maquette dessine (nœud 631:2140, bande de 1790 × 223) ────────── * Les deux blocs sont CENTRÉS ENSEMBLE, pas poussés aux bords : le logo (266 de * large) finit à x=857, le contact commence à x=932, et le milieu de la paire * tombe pile au milieu de la bande. Deux colonnes de 1/2 le donnent exactement, * à condition de rentrer chacune de la moitié des 75 px d'écart. * * Cotes MESURÉES sur le rendu de la maquette (1790 px de large, donc 1 px = 1 px * de dessin), et non lues dans des champs : le nom fait 17 px d'encre → 22 px de * police, le téléphone 13 → 17, les activités 9 → 12, sur un interligne de 1,5 * (4 lignes dans 71 px). Les écarts entre les trois blocs valent 25 px. * ────────────────────────────────────────────────────────────────────────── */ body .nc-footer { background: var(--brand-white); } /* Les 75 px d'écart de la maquette, partagés entre les deux colonnes. Sous 1000, les colonnes s'empilent et se centrent : le retrait n'a plus d'objet. */ @media (min-width: 1000px) { body .nc-footer .nc-footer__marque > .vc_column-inner { padding-right: 37px; } body .nc-footer .nc-footer__contact > .vc_column-inner { padding-left: 37px; } /* ⚠️ Le dessin aligne les deux colonnes sur l'ENCRE : le haut du logo et le haut de capitale du nom sont tous deux à y=25 dans le composant. En CSS le logo commence à son bord d'image, mais le nom commence au haut de sa BOÎTE DE LIGNE, qui porte un demi-interligne au-dessus de la capitale. Mesuré : 10 px de décalage, le nom paraissant démarrer plus bas que le logo. On remonte donc la colonne de contact de ces 10 px. La valeur tient sur toute la bande ≥ 1000, où le nom reste à 24 px — et elle n'a pas cours en dessous, où les colonnes s'empilent et où l'écart logo → contact est réglé ailleurs, à son propre compte. */ body .nc-footer .nc-footer__contact > .vc_column-inner { margin-top: -10px; } } /* ── Sous 1000 : la pile ──────────────────────────────────────────────────── * * Salient empile alors les deux colonnes de 1/2 et le pied de page devient une * pile centrée, logo puis contact. Deux choses ne suivent PAS toutes seules. * * ⚠️ 1. Le LOGO restait collé à DROITE. La colonne passe pourtant bien en * `force-tablet-text-align-center` : ça n'y change rien, parce que l'alignement * de l'image est porté par sa propre enveloppe, `.right.img-with-aniamtion-wrap * { text-align: right }` (salient/css/src/style.css:4498), qu'une classe posée * sur la COLONNE n'atteint pas. Mesuré avant correction, le logo sortait décentré * de +307 px à 999, +205 à 768, +32 à 375 — d'autant moins visible que l'écran * est étroit, donc d'autant plus facile à ne pas voir. * * ⚠️ Et on recentre par `text-align`, pas par `margin: 0 auto` : la règle voisine * `.right.img-with-aniamtion-wrap img` (0-0-2-1) rend l'image `inline-block` et * bat le `display: block` écrit plus bas (0-0-1-0). Sur une image restée EN LIGNE, * une marge auto ne fait rien — elle aurait l'air posée et n'aurait servi à rien. * * ⚠️ 2. L'ÉCART entre le logo et le bloc de contact valait 24 px, c'est-à-dire * exactement le rythme INTERNE du bloc de contact (25 px entre nom, téléphone et * activités) : les quatre blocs se lisaient alors comme une seule liste, sans * hiérarchie. On le double, pour que la marque et le contact restent deux choses. * ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 999px) { body .nc-footer .img-with-aniamtion-wrap, body .nc-footer .img-with-aniamtion-wrap a { text-align: center; } /* Écrase la marge de colonne empilée de WPBakery (25 px), pas un ajout. ⚠️ 36 pour 45 px d'ENCRE, et pas 45 : comme les marges du bloc de contact, celle-ci sépare des boîtes, et la boîte de ligne du nom porte 9 px au-dessus de sa capitale. Mesuré, 45 de marge rendaient 53,8 px d'encre. C'est l'écart VU qui doit valoir ~45 — nettement plus que les 25 du rythme interne, sans quoi la marque et le contact se lisent comme une seule liste. */ body .nc-footer .nc-footer__marque { margin-bottom: 36px; } } @media (max-width: 690px) { /* 27 pour 35 px d'encre, même raison qu'au-dessus (8,5 px de boîte). */ body .nc-footer .nc-footer__marque { margin-bottom: 27px; } } /* ⚠️ `line-height: 0` sur l'enveloppe : Salient pose 15 px de marge basse sous TOUTE image, et la boîte d'interligne du lien ajoute encore quelques pixels sous le logo. Les deux se voient comme un pied de page décentré vers le haut. */ body .nc-footer .img-with-aniamtion-wrap { line-height: 0; } /* ⚠️ La TAILLE du logo ne se règle PAS ici : elle est un champ de l'élément * `image_with_animation` (`max_width_custom`, dans content/footer/global-section.html), * que Salient compile en `.img-with-aniamtion-wrap.custom-width-266px .inner` — * c'est-à-dire sur l'ENVELOPPE, pas sur l'image. Une règle posée sur l'`img` est * inerte : `.row .col img` (0-0-2-1) la bat sur `max-width`, `height` et * `margin-bottom`, et `.right.img-with-aniamtion-wrap img` sur `display`. Mesuré : * un `max-width: 266px` écrit ici calculait 100 %, et le logo faisait bien ses * 266 px — par le champ, pas par la règle. Le genre de ligne qui a l'air de * travailler et qu'on modifierait sans effet. * * Le palier MOBILE passe donc par le même chemin, `max_width_custom_phone="210px"` : * Salient a ses propres champs par appareil, calés sur 999 et 690 px, qui sont * exactement les paliers du projet. Le client garde un champ pour chaque taille, * et rien n'est caché dans la feuille de style. * * Pourquoi 210 en mobile : le logo gardait ses 266 px jusqu'à 375, soit 81 % de la * largeur de ligne — la marque écrasait le contact, qui est pourtant ce qu'on vient * chercher dans un pied de page. À 210 il en occupe les deux tiers. En tablette il * reste à 266 (30 à 44 % de la ligne, comme au bureau) : rien à corriger. */ /* ── Le bloc de contact ───────────────────────────────────────────────────── * * Trois blocs de texte, trois rôles, un seul rythme : 25 px entre chacun. * * ⚠️ Salient donne à tout `p` un `padding-bottom` de 1,5 em * (`--nectar-paragraph-bottom-spacing`), qui s'ajoute aux marges et rendait ici * 24 px de plus entre chaque ligne. C'est lui qu'on éteint, pas la marge : la * marge, elle, porte le rythme voulu et se lit. */ /* ⚠️ Les 25 px du dessin sont des écarts d'ENCRE, entre boîtes TRIMÉES * (`text-box-trim` dans Figma). Une marge CSS, elle, sépare des BOÎTES DE LIGNE, * qui portent en plus le demi-interligne et la descente. Posée à 25 partout, elle * rendait 34 px d'encre sous le nom et 29,6 sous la capsule — trop, et INÉGAL, * ce qui se voit avant même de mesurer. * * Chaque marge est donc calée sur son propre écart : 25 moins ce que la boîte * ajoute au-dessous du dernier trait d'encre. Les valeurs sont mesurées au rendu, * pas calculées — `text-box-trim` n'est pas servi par les navigateurs de * production, on ne peut pas simplement recopier le dessin. * * ⚠️ Ce que la boîte ajoute dépend de la TAILLE : en tablette et en mobile, où le * nom recule de 24 à 21 puis 20, l'écart rendu bouge de ±1,5 px. On ne le * rattrape pas palier par palier — 1,5 px sur un écart de 25 ne se voit pas, et * trois jeux de marges pour ça coûteraient plus en lisibilité qu'ils ne * rapportent. */ body .nc-footer__contact .wpb_text_column { margin-bottom: 25px; } body .nc-footer__contact .nc-footer__nom { margin-bottom: 16px; } body .nc-footer__contact .nc-footer__tel-ligne { margin-bottom: 20px; } body .nc-footer__contact .wpb_text_column:last-child { margin-bottom: 0; } body .nc-footer__contact p { padding-bottom: 0; margin: 0; } /* ⚠️ Le nom est en GEOM, pas en Bricolage, et c'est le seul texte du pied de page * qui change de famille. Relevé dans le composant (nœud 631:2178) : Geom Medium * 24 / 1,5. Il portait Bricolage 600 à 22 px, deux erreurs d'un coup — une mesure * d'ENCRE donne la hauteur des capitales (17 px ici), pas celle de la police, et * elle ne dit rien de la famille. 17 / 24 = 0,71, le rapport capitale/em de Geom : * c'est exactement le piège noté au § 3 du CLAUDE.md pour le H1. */ body .nc-footer__nom p { font-family: var(--nc-font-titres); font-size: 24px; font-weight: 500; line-height: 1.5; color: var(--brand-navy); } /* La PILULE du téléphone. Filet bleu clair, rayon plein, et les 21 px de rembourrage latéral que donne la maquette (capsule de 177 pour un texte de 135). * * ⚠️ Le trait est un `box-shadow: inset` et non un `border` : Figma dessine ses * contours À L'INTÉRIEUR de la boîte, une bordure CSS s'AJOUTE. C'est le même * piège que sur les boutons de l'en-tête, où il coûtait 1,5 px de hauteur. * * ⚠️ Cible tactile : 35 px de haut, au-dessus du plancher de 24 px du projet, * mais sous les 44 confortables. C'est la hauteur DESSINÉE, et un numéro de * téléphone est un lien qu'on vise sans se presser. */ .nc-footer__tel { display: inline-block; /* 21 px de rembourrage latéral : le composant donne une capsule de 177 pour un texte de 135, soit (177 - 135) / 2. Le rembourrage VERTICAL, lui, est déduit et non relevé — voir juste en dessous. */ padding: 6.5px 21px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--brand-blue-light); font-family: var(--nc-font-textes); font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -0.4px; color: var(--brand-navy) !important; text-decoration: none; transition: box-shadow .25s ease; } /* ── Le survol ────────────────────────────────────────────────────────────── * * Le filet ne change PAS de couleur et le fond reste vide : la pilule prend une * LUEUR de sa propre couleur de filet. Ce n'est pas un choix local, c'est la * règle du design system — les quatre composants de bouton à contour (« Bouton * contour bleu clair » 492:101, « petit contour cuivré » 409:200, « transparent » * 399:83, « plein » 573:1305) ont tous la même variante 2 : contour identique, * plus une ombre `1px 1px 8px` de la couleur du filet. Le thème enfant le fait * déjà pour le bouton de l'en-tête (custom.css, § boutons de l'en-tête). * * La valeur du composant au filet bleu clair est `1px 1px 8px rgba(166,196,255,.25)`. * Elle est ÉLARGIE ici — `0 2px 12px` à 55 % — et c'est une décision, mesurée : * * écart maximal entre repos et survol, sur 255 (perception ≈ 8-10) : * · valeur du composant, telle quelle ........ 13 ← à la limite du visible * · même force que le bouton d'en-tête (.33) .. 14 * · retenu : 0 2px 12px à 55 % ................ 30 * * Pourquoi le dessin peut se permettre 13 et pas nous : sa variante 2 fait DEUX * choses, la lueur et le dédoublement du « rond lumière ». C'est le rond qui * porte le visible ; la lueur ne fait que l'accompagner. Cette pilule n'ayant pas * de rond (cf. plus bas), la lueur reste seule — et seule, à la valeur du * composant, elle ne se voit pas. On garde donc la FORME de l'effet, qui est ce * que la charte dit, et on lui donne l'intensité que le dessin obtenait par son * autre moitié. * * ⚠️ Un HALO EN ANNEAU (`0 0 0 4px`) se voyait tout aussi bien et a été écarté : * le `:focus-visible` dessine déjà un anneau terracotta juste en dessous. Deux * anneaux pour deux états différents, et on ne sait plus lequel dit quoi. * * ⚠️ Ce qu'il y avait avant — filet TERRACOTTA et fond BEIGE — était inventé, et * à contre-charte sur les deux points : aucun composant ne change la couleur de * son filet au survol, et le beige n'est un fond de survol nulle part. Ça se * voyait d'autant moins que c'était joli : un survol plausible n'est pas un * survol juste. * * ⚠️ Les deux ombres tiennent dans UNE déclaration, le filet compris : `box-shadow` * n'est pas cumulatif, une seconde déclaration remplacerait la première et la * pilule perdrait son trait au survol. * * ⚠️ L'autre moitié de la variante 2 ne s'applique pas ici : les boutons du * dessin voient leur « rond lumière » se dédoubler au survol. Cette pilule n'en * a pas — le composant du pied de page (631:2179) est une capsule nue. On ne lui * en ajoute pas un : la maquette ne le demande pas. */ .nc-footer__tel:hover, .nc-footer__tel:focus-visible { box-shadow: inset 0 0 0 1px var(--brand-blue-light), 0 2px 12px rgba(166, 196, 255, .55); box-shadow: inset 0 0 0 1px var(--brand-blue-light), 0 2px 12px color-mix(in srgb, var(--brand-blue-light) 55%, transparent); } /* ⚠️ Le focus clavier du navigateur est un contour de 1 px noir sur fond blanc : il se voit à peine et il dessine des angles droits dans une pilule. On pose l'anneau de l'accent, au rayon de la pilule. */ .nc-footer__tel:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; } /* Les activités. Les deux dernières lignes sont en gras dans la maquette : le `` est dans le contenu, donc modifiable par le client, et il prend la graisse de `bold_font_family` (Bricolage 600). */ /* Bricolage Light 14 / 1,45 (nœud 631:2181). Là encore la mesure d'encre mentait : * 12 px posés pour une police de 14, parce que la boîte du composant est TRIMÉE * (`text-box-trim`) et ne montre que l'encre — quatre lignes dans 71 px, soit * 3 × 14 × 1,45 + une hauteur de capitale, et non 4 × interligne. */ body .nc-footer__activites p { font-family: var(--nc-font-textes); font-size: 14px; font-weight: 300; line-height: 1.45; color: var(--brand-navy); } /* Les deux « • » de la ligne en gras sont en BLEU CLAIR dans le composant (631:2181 : `text-[#a6c4ff]` sur ces deux caractères, et sur eux seuls — la puce de « Electricité • Mise en lumière » reste bleu profond). Les `` sont dans le CONTENU (content/footer/global-section.html), pas générés : c'est du texte que le client édite, il doit voir ce qu'il y a. */ .nc-footer__puce { color: var(--brand-blue-light); } /* ── Barre de copyright : la ligne de mentions légales ────────────────────── * * Salient sort ici trois colonnes flottantes (span_5 + span_7) dont une ne sert * qu'aux icônes de réseaux. Elles vivent chez nous dans la Global Section, aux * couleurs de la charte : la liste de Salient reste donc VIDE. On la masque quand * elle l'est, et seulement quand elle l'est, pour ne pas escamoter en silence * des icônes que quelqu'un activerait un jour dans Theme Options → Social Media. * * ⚠️ L'option « Enable Social Icons in Copyright Area » ne sert à rien ici : elle * n'est lue QUE si `social_networks_mode = dynamic` (copyright-bar.php). En * mode `legacy`, qui est le nôtre, Salient boucle sur `use--icon` et * sort le `