/* ══════════════════════════════════════════════════════════════════════════ CHARTE ROSMARYN pour nathalie-rosmaryn.fr · route A, 31/08/2026 ══════════════════════════════════════════════════════════════════════════ Ce que fait cette feuille : ce que les RÉGLAGES de The7 ne savent pas dire. Tout ce qui pouvait passer par un réglage y est passé (124 réglages modifiés le 31/08/2026), parce qu'un réglage se remet dans l'interface d'administration alors qu'une règle CSS ne se retrouve que dans un fichier. ⛔ NE PAS écrire ici ce qui a un réglage. Chercher d'abord dans Apparence > Options du thème. Les jetons viennent VERBATIM de body.light-mode dans hd.nathalie-rosmaryn.fr/wp-content/themes/rosmaryn-hd/style.css : c'est le mode jour de rosmaryn.app, dont les contrastes ont été vérifiés en 07/2026. ⛔ Ne pas les « ajuster à l'œil » ici : ils cesseraient d'être les mêmes que sur l'application, ce qui est tout l'objet de l'opération. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Les jetons Rosmaryn, mode jour ─────────────────────────────────── */ --ros-ground: #f5f3ef; /* --bg-primary : le fond de page */ --ros-secondary: #ece8e1; /* --bg-secondary : les fonds creusés */ --ros-card: #ffffff; /* --bg-card : les cartes */ --ros-ink: #101e3c; /* --text-primary : le bleu nuit du texte */ --ros-ink-2: #3a3850; /* --text-secondary */ --ros-muted: #605d70; /* --text-muted : tient 4,5:1 sur les 4 fonds */ --ros-gold: #8b6914; /* --gold */ --ros-gold-dark: #6b5010; /* --gold-dark */ --ros-gold-rgb: 139, 105, 20; /* Le filet doré à faible opacité est la signature graphique de Rosmaryn : c'est lui qui sépare, jamais un trait gris. */ --ros-hair: rgba(139, 105, 20, 0.18); --ros-hair-soft: rgba(139, 105, 20, 0.10); --ros-r-sm: 6px; --ros-r-md: 10px; --ros-r-lg: 14px; /* ══════════════════════════════════════════════════════════════════════ 🚨 LA PILE DE REPLI DE THE7 EST SANS-SERIF, DERRIÈRE DES POLICES SERIF ══════════════════════════════════════════════════════════════════════ The7 écrit ses 39 variables de police sous la forme "Lora", Helvetica, Arial, Verdana, sans-serif La pile est codée en dur dans le thème, elle ne suit pas la police choisie. Conséquence mesurée : tant que Google Fonts n'a pas répondu, ou s'il ne répond jamais (réseau d'entreprise, extension de blocage), TOUT le site s'affiche en Helvetica. Le défaut ne se voit pas depuis une connexion qui a déjà les polices en cache : il ne se voit que chez le visiteur. ★ On redéfinit les 8 variables utiles avec une pile SERIF. Cette feuille est chargée après css-vars.css, donc c'est elle qui gagne. */ --the7-base-font-family: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --the7-h1-font-family: "Cormorant Garamond", "Apple Garamond", Baskerville, Georgia, "Times New Roman", serif; --the7-h2-font-family: "Cormorant Garamond", "Apple Garamond", Baskerville, Georgia, "Times New Roman", serif; --the7-h3-font-family: "Cormorant Garamond", "Apple Garamond", Baskerville, Georgia, "Times New Roman", serif; --the7-h4-font-family: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --the7-h5-font-family: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --the7-h6-font-family: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --the7-page-title-font-family: "Cormorant Garamond", "Apple Garamond", Baskerville, Georgia, "Times New Roman", serif; --the7-menu-font-family: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --the7-btn-l-font-family: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --the7-btn-m-font-family: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --the7-btn-s-font-family: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; /* ── Les séparateurs passent du gris au filet doré ───────────────────── Ce sont des variables de The7 : les redéfinir ici suffit, aucun composant n'a besoin d'être réécrit. C'est exactement la règle du socle Rosmaryn (« un thème redéfinit des VARIABLES, il ne repeint pas des composants »). */ --the7-divider-color: var(--ros-hair); --the7-input-border-color: var(--ros-hair); --the7-menu-tem-divider-color: var(--ros-hair); --the7-mobile-menu-divider-color: var(--ros-hair); --the7-sidebar-outline-color: var(--ros-hair-soft); --the7-mw-search-border-color: var(--ros-hair); } /* ══════════════════════════════════════════════════════════════════════════ Cormorant Garamond a un œil très petit et des pleins très fins. Sans ces deux réglages, les titres paraissent délavés à côté de l'Inria Serif gras qu'ils remplacent, et on croit à tort que la police « ne va pas ». ⚠ On ne touche PAS aux tailles ici : elles ont un réglage dans The7, et les revoir demande de voir la composition entière (c'est le travail de l'étape suivante). On corrige seulement le RENDU. ══════════════════════════════════════════════════════════════════════════ */ h1, h2, h3, .entry-title, .page-title, .dt-published-date { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: balance; } /* ── La sélection et le focus, en or ──────────────────────────────────── Le focus visible n'est pas un détail : sans lui, la navigation au clavier se fait à l'aveugle. The7 s'appuie sur le contour par défaut du navigateur, qui devient illisible sur fond ivoire. */ ::selection { background: rgba(var(--ros-gold-rgb), 0.22); color: var(--ros-ink); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ros-gold); outline-offset: 2px; border-radius: var(--ros-r-sm); } /* ── Le filet du pied de page ─────────────────────────────────────────── Il était gris et large ; il devient le filet doré de l'application. */ #bottom-bar, #footer { border-top: 1px solid var(--ros-hair); } /* ── Le bouton en pilule ──────────────────────────────────────────────── Le rayon vient du réglage (999px). Ce qui reste ici, c'est la transition et l'état de survol, que The7 rend brutal : il permute deux couleurs sans durée. */ .dt-btn, .dt-btn-m, .dt-btn-s, .dt-btn-l, button, input[type="submit"], .woocommerce a.button, .woocommerce button.button { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ══════════════════════════════════════════════════════════════════════════ Le générateur de Body Graph de rosmaryn.app, page Human Design (31/08/2026) ══════════════════════════════════════════════════════════════════════════ 🚨 POURQUOI UN PANNEAU BLEU NUIT SOUS UN SITE IVOIRE. Le widget est servi en `background: transparent !important` sur son body, et ce dans les DEUX thèmes : son gabarit le dit explicitement, « il se pose sur la page de quelqu'un d'autre et en épouse le fond ». Son mode sombre ne peint donc AUCUN fond, il se contente de rendre clair ce qui doit rester lisible sur un fond sombre (`--wg-text` passe à #e9e6e0). ⚠ Conséquence : posé nu sur l'ivoire du site, `theme=dark` donnerait du texte clair sur fond clair, libellés compris. Ce n'est pas un défaut du widget, c'est un fond hôte manquant. ★ D'où ce panneau : il donne au widget le fond que son thème suppose, et il devient au passage une fenêtre ouverte sur l'application au milieu de la page. Les valeurs sont celles du mode NUIT de Rosmaryn, pas du mode jour. ⚠ Historique utile : `theme=dark` était INOPÉRANT jusqu'au 31/08 17h43, le gabarit codant en dur ``. Corrigé côté rosmaryn.app en ``. Si le widget ressort un jour en texte clair illisible, c'est cette ligne-là qu'il faut regarder. ⚠ La bordure et le rayon de l'iframe sont posés EN LIGNE : un style en ligne bat n'importe quel sélecteur, les redéfinir ici serait sans effet. ══════════════════════════════════════════════════════════════════════════ */ .hd-widget-embed { display: flex; justify-content: center; margin: 2.75rem 0 3rem; padding: 1.75rem 1.25rem; background: #050c1c; /* --bg-primary, mode nuit */ border: 1px solid rgba(201, 168, 76, 0.18); /* --border, mode nuit */ border-radius: 18px; box-shadow: 0 1px 3px rgba(5, 12, 28, 0.10), 0 18px 44px -22px rgba(5, 12, 28, 0.55); } .hd-widget-embed iframe { display: block; width: 100%; max-width: 500px; } @media (max-width: 640px) { .hd-widget-embed { padding: 1.25rem 0.75rem; border-radius: 14px; margin: 2rem 0 2.25rem; } } /* ══════════════════════════════════════════════════════════════════════════ LES PAGES ÉDITORIALES · route B, 31/08/2026 ══════════════════════════════════════════════════════════════════════════ La classe `ros-editorial` est posée par functions.php sur toute page qui n'est PAS fonctionnelle (boutique, panier, commande, compte, rendez-vous, inscription). Rien ici ne peut donc atteindre les grilles de la boutique. 🚨 CE QUI A ÉTÉ ESSAYÉ PUIS RETIRÉ, ET POURQUOI (31/08/2026). J'avais plafonné `#content` à 40rem pour ramener la ligne de ~140 signes à ~70. Mesuré ensuite sur /soins-energetiques/, qui est en DEUX COLONNES (texte + photo) : le plafond s'appliquait au conteneur, donc la colonne de texte tombait à ~180 px de large, en rubans de trois mots. Une largeur de lecture posée sur le CONTENEUR casse toute page multi-colonnes. ⛔ Ne pas remettre `max-width` sur `#content`. ★ Décision de l'éditeur : le contenu suit la largeur générale du site, celle du menu principal. Le confort de lecture se gagnera par la composition (colonnes, encarts, images), pas en rétrécissant le conteneur. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ LE RYTHME VERTICAL DES TITRES ══════════════════════════════════════════════════════════════════════ ★ La règle qui compte : un titre appartient à ce qui le SUIT, pas à ce qui le précède. Son blanc du dessus doit donc être nettement plus grand que celui du dessous, sinon l'œil ne sait pas à quel bloc il se rattache. Rapport retenu : environ 4 pour 1. ⚠ Les marges sont en `em`, donc relatives à la taille du titre lui-même : un h2 de 35 px prend plus d'air qu'un h3 de 28 px sans qu'on ait à écrire deux valeurs. C'est ce qui rend l'échelle et le rythme solidaires. ⛔ Ne pas remettre `line-height` ici : il vient des réglages The7, où il est désormais proportionné à chaque niveau (52/42/36/30/27/24 px). */ .ros-editorial #content h1 { margin-top: 1.9em; margin-bottom: 0.45em; } .ros-editorial #content h2 { margin-top: 2em; margin-bottom: 0.5em; } .ros-editorial #content h3 { margin-top: 1.9em; margin-bottom: 0.5em; } .ros-editorial #content h4 { margin-top: 1.8em; margin-bottom: 0.5em; } /* h6 n'est plus un titre mais une ÉTIQUETTE : à 16 px il ne peut pas se distinguer d'un paragraphe par la taille, il le fait par la casse. */ #content h6 { text-transform: uppercase; letter-spacing: 0.12em; color: var(--ros-gold); } .ros-editorial #content > *:first-child, .ros-editorial #content .wpb_text_column:first-child h1:first-child, .ros-editorial #content .wpb_text_column:first-child h2:first-child, .ros-editorial #content .wpb_text_column:first-child h3:first-child { margin-top: 0; } .ros-editorial #content p { margin-bottom: 1.15em; line-height: 1.65; } .ros-editorial #content ul, .ros-editorial #content ol { margin-bottom: 1.15em; line-height: 1.65; } .ros-editorial #content li::marker { color: var(--ros-gold); } /* ── Les liens dans le texte ──────────────────────────────────────────── Un lien doit se voir sans dépendre de la seule couleur : en or sur ivoire, la teinte seule ne suffit pas pour un œil qui distingue mal les couleurs. */ .ros-editorial #content p a, .ros-editorial #content li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(var(--ros-gold-rgb), 0.45); } .ros-editorial #content p a:hover, .ros-editorial #content li a:hover { text-decoration-color: var(--ros-gold); } /* ══════════════════════════════════════════════════════════════════════════ LE PIED DE PAGE · 31/08/2026 ══════════════════════════════════════════════════════════════════════════ 🚨 CE QUI A ÉTÉ RÉPARÉ ICI, ET QUE J'AVAIS CASSÉ. En basculant l'en-tête de la disposition « side » à « classic », l'e-mail, le téléphone et les deux réseaux sociaux ont disparu du site : ils vivaient dans `header-side-elements.below_menu`, sous le menu vertical, et cette zone n'existe pas dans la disposition centrée. Mesuré : plus AUCUNE occurrence de l'adresse ni du numéro sur l'accueil. ★ Ils sont désormais dans le pied, qui est leur place naturelle et où ils valent pour toutes les pages, pas seulement l'accueil. Le pied n'avait aucun widget : les trois colonnes réglées dans The7 étaient vides, et seule la barre du bas s'affichait. Trois widgets HTML ont été ajoutés dans la zone « Pied par défaut » (sidebar_2). ══════════════════════════════════════════════════════════════════════════ */ #footer .widget_custom_html + .widget_custom_html { margin-top: 0; } #footer .widget-title, #footer .widget h3 { font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif); font-size: 1.3rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ros-gold); margin-bottom: 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--ros-hair); } .ros-foot-lede { color: var(--ros-muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1rem; } #footer ul.ros-foot-contact, #footer ul.ros-foot-nav { list-style: none; margin: 0; padding: 0; } #footer ul.ros-foot-contact li, #footer ul.ros-foot-nav li { margin: 0 0 0.45rem; line-height: 1.5; } #footer ul.ros-foot-contact li::before, #footer ul.ros-foot-nav li::before { content: none; } #footer .ros-foot-contact a, #footer .ros-foot-nav a, #footer .ros-foot-social a { color: var(--ros-ink); font-size: 0.92rem; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } #footer .ros-foot-contact a:hover, #footer .ros-foot-nav a:hover, #footer .ros-foot-social a:hover { color: var(--ros-gold); border-bottom-color: var(--ros-hair); } /* Les deux réseaux, séparés par un point médian dessiné, pas par un caractère : un séparateur en CSS n'est pas lu par les lecteurs d'écran. */ .ros-foot-social { margin: 1rem 0 0; display: flex; align-items: center; gap: 0.75rem; } .ros-foot-social a + a { position: relative; padding-left: 0.75rem; } .ros-foot-social a + a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--ros-gold); transform: translateY(-50%); opacity: 0.6; } /* ── Le bouton du pied : la pilule dorée, en petit ────────────────────── 🚨 CE BOUTON A ÉTÉ INVISIBLE UNE HEURE, ET LA CAUSE MÉRITE D'ÊTRE ÉCRITE. Mon premier jet le ciblait par `.ros-foot-cta` seul (spécificité 0,1,0) avec un `!important` sur la seule COULEUR. The7 style ses liens de pied par des sélecteurs à identifiant, donc bien plus spécifiques : son fond gagnait, mon texte ivoire gagnait. Résultat : du texte ivoire sur un fond ivoire, sur une page où le lien EST BIEN présent dans le HTML servi. ★ C'est le pire genre de défaut : rien n'échoue, rien n'est absent, et un contrôle qui cherche la chaîne dans la page répond « présent ». ★ La réparation n'est pas d'ajouter des `!important` un par un, c'est de préfixer par `#footer` : le fond et la couleur gagnent alors ENSEMBLE. */ #footer .ros-foot-cta { display: inline-block; margin-top: 0.35rem; padding: 0.62rem 1.3rem; border-radius: 999px; background: var(--ros-gold); color: var(--ros-ground); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border: 1px solid var(--ros-gold); border-bottom: 1px solid var(--ros-gold); transition: background-color 0.2s ease, border-color 0.2s ease; } #footer .ros-foot-cta:hover { background: var(--ros-gold-dark); border-color: var(--ros-gold-dark); color: var(--ros-ground); } /* Les liens légaux, détachés de la navigation par un filet plutôt que par un titre : ils n'ont pas le même statut, mais ne méritent pas une colonne. */ #footer .ros-foot-legal { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--ros-hair); } #footer .ros-foot-legal a { color: var(--ros-muted); font-size: 0.85rem; } #footer .ros-foot-legal a:hover { color: var(--ros-gold); } /* La barre du bas, plus discrète que les colonnes qu'elle clôt. */ #bottom-bar { font-size: 0.83rem; } #bottom-bar a { color: var(--ros-muted); text-decoration: none; } #bottom-bar a:hover { color: var(--ros-gold); } #bottom-bar .bottom-text-block p { margin: 0; } @media (max-width: 778px) { #footer .widget-title, #footer .widget h3 { margin-top: 1.75rem; } #footer .widget:first-child .widget-title { margin-top: 0; } } /* ══════════════════════════════════════════════════════════════════════════ LES FORMULAIRES · UN SEUL STYLE POUR TOUT LE SITE (31/08/2026) ══════════════════════════════════════════════════════════════════════════ Deux extensions différentes servent les deux formulaires du site, chacune avec ses propres valeurs par défaut : **MailerLite** pour la newsletter, **WPForms** pour le contact. D'où deux allures étrangères l'une à l'autre, et étrangères au site : la newsletter sortait avec un bouton NU, celui que dessine le navigateur, et le contact avec un bouton BLEU `#066aab`. 🚨 POURQUOI LES VARIABLES SONT REDÉCLARÉES SUR `.wpforms-container` ET NON SUR `:root`. WPForms imprime ses variables dans un `