/* ========================================================================= CORPUS, la feuille des reglages REECRITE le 31 juillet 2026. L'ancienne version portait les 37 selecteurs de couleur d'origine, une taille de corps, une interligne et deux polices Google. Elle etait chargee APRES template.css et gagnait sur lui : notre regle de police etait ecrite mais perdante, mesure dans l'inspecteur. Ce fichier ne pose plus qu'une chose : LA TEINTE. La saturation, la clarte, l'echelle typographique et la pile de polices vivent dans les jetons de la feuille, et ne se reglent pas. Syntaxe : inherit est remplace par la valeur du champ. Un bloc encadre par les marqueurs "?param" et "/param" en commentaire n'est ecrit que si le champ est rempli. ========================================================================= */ /* La teinte, et elle seule. 0-359. C'est le reglage de couleur du site, sauf quand une couleur de marque est choisie : elle le remplace, voir plus bas. La feuille en derive l'accent, son survol, son etat actif, sa nuance pale et son trait, en clair comme en sombre, avec une saturation et une clarte figees. Aucun reglage ne peut donc casser l'accessibilite : tools/contraste.mjs le verifie sur les 360 teintes. Les couleurs d'etat (information, succes, avertissement, erreur) ne derivent JAMAIS d'ici. Elles portent un sens, pas une identite. Le focus non plus. Le bloc est conditionnel A DESSEIN : sur un style enregistre avant le 31 juillet 2026, le parametre n'existe pas encore en base. Sans cette garde, la feuille ecrirait « --corpus-teinte: ; », valeur invalide, et l'accent disparaitrait de tout le site. Laisse vide, c'est le defaut de _echelle.scss (90, olive) qui s'applique. */ :root { --corpus-teinte: 187; } /* Largeur du site. Le bloc n'est ecrit que si le champ est rempli : laisse vide, le site garde --largeur-page, soit 1140 px. */ .page { max-width: 1420px; } /* Les gouttieres. Deux reglages distincts, parce que ce sont deux espaces distincts : la marge entre le contenu et le bord de l'ecran d'un cote, l'espace entre deux colonnes de l'autre. Ils valent 24 px tous les deux par defaut, ce qui les fait passer pour un seul. On ecrit le JETON, jamais la regle : c'est ce qui permet a l'echelle mobile de reprendre la main a 48 rem sans avoir a battre quoi que ce soit en specificite. */ /* La largeur MINIMALE d'une colonne de mega-menu, 12 aout 2026. Le panneau declare une largeur de colonne, jamais un nombre : le nombre suit la place, y compris au zoom a 200 %. Et comme le panneau se dimensionne en `max-content`, une colonne vaut le plus grand de son contenu et de cette valeur : c'est un plancher, pas une largeur imposee. LE JETON N'EXISTE QUE SI LE CHAMP EST REMPLI, et c'est tout l'interet du bloc conditionnel. _navigation.scss ne declare pas `--mega-colonne` : il le LIT avec un repli, `var(--mega-colonne, 16rem)`. S'il le declarait aussi, cette feuille et la sienne ecriraient toutes deux `:root`, meme poids, et c'est l'ordre de chargement qui trancherait, pas nous. Meme motif que `fond-module` le 3 aout : on n'affronte pas un selecteur, on lui donne une valeur de repli. */ /* L'alignement du texte des sous-menus et du mega-menu, 15 octobre 2026. Meme motif que la colonne de mega-menu : _navigation.scss LIT le jeton avec un repli (`start`), il ne le declare pas. */ :root { --nav-sous-align: start; } /* Logo. Le nom du site reste dans le balisage quand une image le remplace : il porte le lien pour les lecteurs d'ecran et les moteurs de recherche. RGAA 1.1 : c'est pour cela qu'on le repousse hors de l'ecran au lieu de le supprimer. */ .marque--image .marque__nom { display: block; width: 184px; height: 84px; background: var(--logo-image) no-repeat center / contain; text-indent: -999em; overflow: hidden; } /* LE FICHIER PASSE PAR UN JETON, et c'est ce qui permet au theme sombre d'en servir un autre sans reecrire la regle. C'est la doctrine de la maison, ecrite en tete de _echelle.scss : une regle qui aurait besoin d'un selecteur [data-theme="sombre"] signale qu'un jeton manque. */ :root { --logo-image: url(/images/logo/logo-aquanature.svg); } /* Logo, la variante qui suit la teinte du site. 10 aout 2026. UN SVG CHARGE DE L'EXTERIEUR EST ISOLE. Qu'il arrive par url() ou par , le navigateur ne lui donne acces ni a currentColor ni aux variables de la page : ecrire fill="currentColor" dans le fichier ne produit rien. C'est une isolation voulue, pas un defaut a contourner. Le masque prend le probleme par l'autre bout : le fichier ne sert plus d'image mais de DECOUPE, et c'est un aplat de --accent qu'on peint au travers. Meme technique que le pictogramme de lien externe, les icones d'alerte et les chevrons : le vocabulaire existait deja. Le logo suit alors la teinte ET le mode sombre : --accent vaut 32 % de clarte en clair, 70 % en sombre, l'un et l'autre mesures aux 360 teintes. Un logo pose en image reste noir sur fond noir ; celui-ci non. CONTREPARTIE ASSUMEE : il devient monochrome. Un degrade, une seconde couleur, un aplat blanc interieur : tout disparait, il ne reste que la silhouette. D'ou le reglage : c'est un choix, pas un comportement. CE BLOC N'EST PAS LE TRONC, ET C'EST DELIBERE. Il vient APRES la regle ci-dessus et l'ecrase quand le reglage vaut 1. L'inverse (deux variantes conditionnelles) aurait fait disparaitre le logo de tous les styles deja enregistres, ou le parametre n'existe pas encore et ne vaut donc ni 0 ni 1. Ici, son absence rend exactement le comportement d'avant. `background` en raccourci remet background-image a none : l'image et la decoupe ne peuvent pas se superposer. */ /* LE LOGO DU THEME SOMBRE. 27 septembre 2026, releve par Cyrille sur joomanji.eu : son logo porte un texte noir, et sur le fond sombre il n'etait plus lisible. Rien ne le signalait. UNE IMAGE NE SAIT RIEN DU THEME. Le bloc au-dessus repond au cas du logo d'une seule couleur, en s'en servant comme decoupe ; un logo a deux tons y perd sa seconde couleur. Ici on echange le FICHIER, et il garde tout. ON NE REECRIT PAS LA REGLE, on redonne le jeton : la taille, le cadrage et le retrait du texte restent ecrits une seule fois. `.section--dark` EST LA POUR LA MEME RAISON QUE DANS _echelle.scss : une bande peut etre sombre dans un site clair, et le logo qu'elle contient doit suivre la bande, pas la page. `:root[data-theme]` ET NON `[data-theme]` SEUL : `:root` et un selecteur d'attribut pesent le meme poids, et ce bloc ne doit pas dependre de son rang dans le fichier pour gagner. */ :root[data-theme="sombre"], .section--dark { --logo-image: url(/images/logo/logo-aquanature-sombre.svg); } /* LE SELECTEUR N EST PAS :root, ET C EST LA CORRECTION DU 20 AOUT 2026. Mesure sur joomanji.eu en theme sombre, avec les valeurs PAR DEFAUT jamais touchees : --erreur sur --erreur-fond donnait 2,19 pour 1, --succes 2,43. Le seuil est 4,5. Cause : cette feuille est chargee APRES template.css, et un :root pese autant qu un [data-theme="sombre"]. La valeur claire gagnait donc dans les DEUX themes, et la paire sombre calibree de _echelle.scss n etait jamais servie. Sur tout le site : messages systeme, erreurs sous les champs, filets. contraste.mjs ne le voyait pas : il mesure le SCSS, et cette feuille est produite a l execution. En visant [data-theme="clair"] au lieu de :root, le choix de l administrateur s applique au theme clair, et le sombre garde la paire calibree. Consequence assumee, et c est la seule tenable : l administrateur ne choisit qu une couleur, on ne peut pas en deduire sa variante sombre a sa place. */ /* Les couleurs des messages. Reglables depuis le 31 juillet 2026, a la demande de Cyrille : elles varient d'un client a l'autre. Elles ne derivent TOUJOURS PAS de la teinte : elles portent un sens, pas une identite, et ne doivent pas bouger quand l'administrateur tourne le curseur. Les fonds pales ne se reglent pas : ils restent ceux des jetons. Un fond choisi librement sous un texte choisi librement, c'est deux inconnues pour un seul rapport de contraste. */ [data-theme="clair"], .section--light { --info: #1c5a86; } [data-theme="clair"], .section--light { --succes: #1f6b3d; } [data-theme="clair"], .section--light { --alerte: #8a5300; } [data-theme="clair"], .section--light { --erreur: #a02127; } /* ========================================================================= TYPOGRAPHIE, 2 aout 2026 Les valeurs des listes SONT des piles CSS completes : l'option porte directement `system-ui, -apple-system, …`. Le gabarit n'a donc rien a traduire, et ajouter une pile ne demande aucune ligne de PHP. La pile systeme reste en repli DANS chaque valeur, y compris derriere Roboto et derriere une police externe : un chargement rate ne doit pas renvoyer sur Times New Roman. ========================================================================= */ /* VOTRE POLICE, HEBERGEE PAR LE SITE, 2 aout 2026. Les @font-face sont ecrits ICI et pas en PHP : ils dependent de valeurs de reglage, et c'est exactement ce que cette feuille sait faire. Chaque bloc est conditionnel a SON fichier : un site qui ne depose que la graisse normale n'ecrit pas trois declarations dont deux pointent sur rien. Le navigateur synthetisera le gras et l'italique, moins beau qu'une vraie graisse, mais lisible, et sans requete morte. Le chemin est relatif au fichier produit, qui vit dans media/templates/site/corpus/css/custom-styles/. Les polices sont deux crans plus haut, dans fonts/. CHAQUE BLOC DEPEND DE DEUX REGLAGES, d'ou le `+`. Releve du 7 septembre 2026 : un fichier depose sans nom de famille sortait `font-family: "inherit"`, parce que c'est le repli d'un jeton sans valeur. Une famille nommee « inherit » chez tous les visiteurs, et une requete pour un fichier que plus rien n'appelle. */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/lato-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/lato-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("../../fonts/lato-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: italic; font-weight: 700; font-display: swap; src: url("../../fonts/lato-latin-700-italic.woff2") format("woff2"); } /* LE FICHIER VARIABLE, 15 octobre 2026. Les memes fichiers, declares cette fois pour toute la plage de graisses. Ecrits APRES les declarations a graisse fixe : quand deux faces conviennent, le navigateur prend la derniere, donc le fichier variable sert toutes les graisses. Les faces fixes restent ecrites, sans cout : meme adresse, un seul telechargement. La condition `typoVariable=1` exige la valeur, pas seulement un champ rempli : voir tousRenseignes() dans helper.php. */ /* LA POLICE DES TITRES, 15 octobre 2026. Une seule face, declaree pour toute la plage : le navigateur sert le fichier tel quel a la graisse demandee par les titres, sans fabriquer de faux gras. */ @font-face { font-family: "Quicksand"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../fonts/quicksand-latin-wght-normal.woff2") format("woff2"); } /* LES DEUX JETONS D'INDIRECTION. C'est eux qui permettent a une police SAISIE PAR LE CLIENT d'entrer dans une liste deroulante ECRITE A L'AVANCE : l'option vaut « var(ce jeton), puis la pile systeme », et le jeton porte le nom qu'il a saisi. Sans nom saisi, le jeton reste indefini : `var()` passe alors au repli, donc a la pile systeme. Un champ vide ne casse rien, il ne fait rien. */ :root { --police-hebergee: "Lato"; } :root { --police-titres-hebergee: "Quicksand"; } :root { --police: var(--police-hebergee), system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; } /* Les titres. Laisse vide, ils prennent la police du texte : c'est le defaut de _echelle.scss, `var(--police)`. */ :root { --police-titres: var(--police-titres-hebergee), system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; } /* Les graisses. Le texte courant est borne a 400 et 500 dans le manifeste : une graisse plus fine reduit le contraste PERCU sans qu'aucun calcul ne le voie. */ :root { --police-graisse: 400; } :root { --police-titres-graisse: 500; } /* Le facteur d'echelle. Jamais sous 1 : le manifeste n'offre que 1 et au-dessus. Voir le commentaire de --echelle dans _echelle.scss. */ :root { --echelle: 1; } /* Le fond des modules et des cartes, 3 aout 2026. Le bloc n'est ecrit QUE si l'administrateur choisit « teinte ». C'est tout le mecanisme : les jetons de forme lisent `var(--fond-module, )`, donc faire exister `--fond-module` suffit a gagner, y compris contre `:root[data-variante]` qui pese pourtant (0,2,0). Laisse sur « neutre », le jeton n'existe pas et chaque variante garde son propre fond. On n'ecrit pas la couleur mais un `var()` vers `--fond-teinte`, pour que le fond suive la teinte EN DIRECT : un changement de teinte n'a alors aucune feuille a reecrire. */ /* La couleur de marque, 15 octobre 2026. Ce repere est remplace par les jetons que calcule helper.php (blocMarque), ou par rien si le champ est vide. Il est ICI, avant le CSS de l'integrateur, pour que ses retouches gardent le dernier mot. */ /* La couleur de marque, calculee par Corpus. Voir helper.php, blocMarque(). */ :root, [data-theme="clair"], .section--light { --corpus-teinte: 187; --accent: hsl(187 53% 34%); --accent-survol: hsl(187 53% 28%); --accent-actif: hsl(187 53% 23%); --accent-doux: hsl(187 50% 95%); --accent-trait: hsl(187 40% 84%); --fond-teinte: hsl(187 50% 96%); --focus: hsl(187 53% 34%); --focus-halo: hsl(187 53% 34% / 0.25); --info: hsl(187 53% 34%); --info-fond: hsl(187 53% 95%); } [data-theme="sombre"], .section--dark { --accent: hsl(187 53% 55%); --accent-survol: hsl(187 53% 65%); --accent-actif: hsl(187 53% 73%); --accent-doux: hsl(187 35% 17%); --accent-trait: hsl(187 30% 30%); --fond-teinte: hsl(187 20% 12%); --focus: hsl(187 53% 55%); --focus-halo: hsl(187 53% 55% / 0.30); --info: hsl(187 53% 65%); --info-fond: hsl(187 30% 14%); } /* La couleur secondaire, pour les filets. Voir helper.php, blocSecondaire(). */ :root, [data-theme="clair"], .section--light { --secondaire: hsl(187 100% 37%); --filet-couleur: var(--secondaire); } [data-theme="sombre"], .section--dark { --secondaire: hsl(187 100% 37%); --filet-couleur: var(--secondaire); } /* ========================================================================= LE CSS DE L'INTEGRATEUR, 2 aout 2026 EN DERNIER, ET C'EST LE POINT. Ce fichier est charge apres la feuille de Corpus, et ce bloc est le dernier du fichier : a specificite egale, il gagne. L'integrateur n'a donc pas besoin de surencherir en selecteurs. CE QU'IL FAUT Y ECRIRE, ce sont des JETONS, pas des regles : :root { --forme-carte-angle: 0; --filet-part: 50%; } Une regle qui a besoin d'un `!important` pour gagner signale presque toujours qu'un jeton existe pour la meme chose. C'est ecrit dans la description du champ, parce que personne ne lit les commentaires d'un fichier compile. Le contenu n'est pas echappe : c'est du CSS, ecrit par un administrateur qui a deja le droit de modifier les fichiers du template. Il finit dans un fichier .css servi tel quel, jamais dans le HTML. ========================================================================= */